Operation modal single load data

This time I will bring you the single-time loading data of modal. What are the precautions for operating modal single-loading data? The following is a practical case, let's take a look.

1. Bootstrap Modal dialog box and simple use

 <p id="myModal" class="modal hide fade">
 <p class="modal-header">
 <button type="button" class="close" data-dismiss="modal">x</button>
 <h3>对话框标题</h3>
 </p>
 <p class="modal-body">
 <p>对话框主体</p>
 </p>
 <p class="modal-footer">
 <a href="#" rel="external nofollow" rel="external nofollow" class="btn" data-dismiss="modal">取消</a>
 <a href="#" rel="external nofollow" rel="external nofollow" class="btn btn-primary" data-dismiss="modal">确定</a>
 </p>
</p>

buttons or links, here is the simple usage:

<button type="button" data-toggle="modal" data-target="#myModal">打开对话框</button>
<a href="#myModal" rel="external nofollow" role="button" class="btn" data-toggle="modal">打开对话框</button>

2. Use the remote option to let the modal dialog load the page into .modal-body

2.1 Using links

<a href="page.jsp" rel="external nofollow" data-toggle="modal" data-target="#myModal">打开对话框</a>

2.2 Using script

$("#myModal").modal({
 remote: "page.jsp"
});

jQuery to load page.jsp from the server side. page. But this loading will only happen once, no matter how many times you click on the link or execute the script, even if the changes are passed to the remote The value of the option, the dialog box will not reload the page, which is a real headache. However, the problem can still be solved.

3. Remove data so that the dialog box can reload the page every time it is opened

and consulting relevant documents, I found that just writing a statement in the hidden event of the dialog box:

$("#myModal").on("hidden", function() {
 $(this).removeData("modal");
});

Note: The above code is based on Bootstrap v2. If you use Bootstrap v3, the HTML of the modal dialog box and the way of writing the event are somewhat different. For example, for the above hidden event, it should be written as:

$("#myModal").on("hidden.bs.modal", function() {
 $(this).removeData("bs.modal");
});

I believe I read the case in this article You have mastered the method. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

The above is the detailed content of Operation modal single load data. For more information, please follow other related articles on the PHP Chinese website!