Solve the problem of Bootstrap only loading remote data once-H5 Tutorial-php.cn

Solve the problem of Bootstrap only loading remote data once

巴扎黑

Release： 2017-07-24 11:06:37

Original

1719 people have browsed it

Abstract: For the modal dialog box of the front-end framework Bootstrap, you can use the remote option to specify a URL, so that the dialog box will automatically load data from this address into the .modal-body when it pops up for the first time, but it only It will be loaded once, but this problem can be solved by calling the removeData() method in the event.

1. Bootstrap modal dialog box and simple use

 1 <div id="myModal" class="modal hide fade"> 2     <div class="modal-header"> 3         <button type="button" class="close" data-dismiss="modal">x</button> 4         <h3>对话框标题</h3> 5     </div> 6     <div class="modal-body"> 7         <p>对话框主体</p> 8     </div> 9     <div class="modal-footer">10         <a href="#" class="btn" data-dismiss="modal">取消</a>11         <a href="#" class="btn btn-primary" data-dismiss="modal">确定</a>12     </div>13 </div>

Copy after login

The display effect is similar to the picture below:

You can directly call the modal dialog box using a button or link. This is a simple usage:

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

Copy after login

 <br/>

Copy after login

This can only display static content in the dialog box. Use the remote option of the dialog box to achieve a more powerful effect.

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

There are two methods, one is to use a link, the other is to use a script.

2.1 Using a link

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

Copy after login

When this link is clicked, the content of page.jsp will be loaded into the .modal-body of the dialog box , a dialog box appears.

2.2 Using script

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

Copy after login

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

Behind these two methods, Bootstrap calls jQuery's load() method to load the page.jsp page from the server. But this loading will only happen once. No matter how many times you click the link, or execute the script several times, or even change the value passed to the remote option, the dialog box will not reload the page. This is really a headache. But 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 writing a message in the hidden event of the dialog box The statement is enough:

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

Copy after login

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

Copy after login

The above is the detailed content of Solve the problem of Bootstrap only loading remote data once. For more information, please follow other related articles on the PHP Chinese website!