Detailed explanation of the two loading methods of bootstrap's modal-remote [Strength]

Method 1:

Use link

<a href="" data-toggle="modal" data-target="#mymodal">Open</a>

When clicking on the connection, the content can be loaded dynamically into <div class="modal-content"></div>. Of course, the connection here can also be a controller

Method 2:

Using scripts

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

However, after loading like this, there will be problems. The modal data is only loaded once. If you want to load different data, for example, query the detailed information based on the id, the 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 easiest way is to listen to the hidden of the modal. When the modal is closed, the data can be cleared:

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

The problem is: If there is a $() loading event on the requested page, such as boostrap-validator or boostrap-fileinput, there will be a strange phenomenon. The first time is executed normally, the modal is turned off, the second time, the $() code is not executed, and the third time can be executed. After repeated discovery, the "" listening is executed every time, but the data loaded into <div class="modal-content"></div> has not been cleared. This may be caused by this phenomenon, so I changed it to the following code:

$("#myModal").on("", function() {  
  $(this).removeData(""); 
  /*Modal page loading $() error. Since the data that was not removed is loaded to <span style="color: rgb(51, 51, 255);"><div class="modal-content"></div></span> when removing the cache, the loaded content will be manually removed*/ 
  $(this).find(".modal-content").children().remove();  
});  

This problem has been solved!

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.