The Bootstrap mode dialog box only loads the remote data once.

The Bootstrap mode dialog box only loads the remote data once.
Abstract: In the frontend framework Bootstrap modal dialog box, you can use the remote option to specify a URL. In this way, the dialog box automatically loads data from this address at the first pop-up. modal-body, but it will only load 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 
 
The display effect is similar to the following:

 
You can use buttons or links to directly call the modal dialog box. This is a simple usage:
<Button type = "button" data-toggle = "modal" data-target = "# myModal"> open the dialog box </button> <a href = "# myModal" role =" button "class =" btn "data-toggle =" modal "> open the dialog box </button>
 
In this way, the static content can only be displayed in the dialog box, and the remote option of the dialog box can achieve more powerful results.
2. Use the remote option to load the page in the modal dialog box to. modal-body.
There are two methods: Use a link and use a script.
2.1 usage Link
<A href = "page. jsp" data-toggle = "modal" data-target = "# myModal"> open the dialog box </a>
 
When you click this link, the page. jsp content is loaded into the. modal-body dialog box, And the dialog box is displayed.
2.2 use scripts
$("#myModal").modal({    remote: "page.jsp"});
 
The effect of this script is the same as that of the link. After this script is executed, the content of page. jsp is loaded into the. modal-body dialog box, And the dialog box is displayed.
Behind these two methods, Bootstrap calls jQuery's load () method and loads the page. jsp page from the server. However, this loading only happens once. No matter how many times you click a link or execute a script or change the value passed to the remote option, the dialog box does not reload the page, this is really a headache. However, the problem can still be solved.
3. Remove data so that the dialog box can reload the page each time it is opened.
After searching and reading the relevant documents, you can find that you can write the previous statement in the hidden event of the dialog box:
$("#myModal").on("hidden", function() {    $(this).removeData("modal");});
 
You can also remove the data before each dialog box. The effect is the same.
Note:The above code is based on Bootstrap v2. If Bootstrape v3 is used, the HTML of the modal dialog box is different from the event writing method. For example, for the preceding hidden event, you must write it as follows:
$("#myModal").on("hidden.bs.modal", function() {    $(this).removeData("bs.modal");});
 
Go to: https://my.oschina.net/qczhang/blog/190215? P = 1