Describes how to load bootstrap modal-remote [enhancement] And bootstrapmodal.

Describes how to load bootstrap modal-remote [enhancement] And bootstrapmodal.

Method 1:

Usage Link

<A href = "demo. jsp" data-toggle = "modal" data-target = "# mymodal"> open </a>

When you click this connection, the content of demo. jsp can be dynamically loaded to <div class = "modal-content"> </div>. Of course, the connection here can also be controller

Method 2:

Script

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

However, after loading, modal data is loaded only once. If you want to load different data, such as querying detailed information by id, modal data cannot be updated, even if the passed id value is different. In fact, the solution is very simple. You only need to clear the previously loaded data before loading the next data.

The simplest way is to monitor modal hidden. When modal is disabled, clear the data:

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

The problem is: If $ () Loading event loading, such as boostrap-validator or boostrap-fileinput, occurs on the requested page, the plug-in will run normally for the first time, and modal will be disabled, for the second time, the $ () code is not executed and can be executed for the third time. bs. the modal listener is executed every time, but the data loaded into <div class = "modal-content"> </div> is not cleared, this may be caused by this problem, so we changed it to the following code:

$ ("# MyModal "). on ("hidden. bs. modal ", function () {$ (this ). removeData ("bs. modal ");/* modal page loading $ () error, due to loading to <span style =" color: rgb (51, 51,255) when the cache is removed ); "> <div class =" modal-content "> </div> </span> unremoved data, manually remove the loaded content */$ (this ). find (". modal-content "). children (). remove ();});

This problem is solved!

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.