Solve the problem of Bootstrap only loading remote data once

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 11044ab4e39092bf3655a081d6df70d6 2     0b561c7c414147a96bbbb8cc10c3d06d 3         6e52c62ccaa796a4ccb90a0458fc6482x65281c5ac262bf6d81768915a4a77ac0 4         684271ed9684bde649abda8831d4d355对话框标题39528cedfa926ea0c01e69ef5b2ea9b0 5     16b28748ea4df4d9c2150843fecfba68 6     6e1ceff927595656120650f97442eabc 7         e388a4556c0f65e1904146cc1a846bee对话框主体94b3e26ee717c64999d7867364b1b4a3 8     16b28748ea4df4d9c2150843fecfba68 9     fcea287e1681f6566fd9116658b8e4f010         3967e4ba8273165820a9b7674e47f6ae取消5db79b134e9f6b82c0b36e0489ee08ed11         68ea5ffc0ceb7fd5909bec72cbe1fb30确定5db79b134e9f6b82c0b36e0489ee08ed12     16b28748ea4df4d9c2150843fecfba6813 16b28748ea4df4d9c2150843fecfba68

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:

d6301f9ab9f294fdeb81d11564d75ad2打开对话框65281c5ac262bf6d81768915a4a77ac04cbacbf3366c8120d74e550377e58870打开对话框65281c5ac262bf6d81768915a4a77ac0

 <br/>

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

c06a237a3239f2443464e77605828245打开对话框5db79b134e9f6b82c0b36e0489ee08ed

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

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

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

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!