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>

Modal dialogs can be called directly using

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

There are two methods, one is to use links and the other is to use scripts.

2.1 Using links

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

When this link is clicked, the content of page.jsp is loaded into the .modal-body of the dialog box, and the dialog box is displayed.

2.2 Using script

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

The effect of this script is the same as using a link. When this script is executed, the content of page.jsp will be loaded into the .modal-body of the dialog box, and the dialog box will be displayed.

Behind these two methods, Bootstrap calls the load() method of

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

After searching

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");
});

You can also remove the data before opening the dialog box each time, and the effect is the same.

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!