Home Bootstrap remote Modal doesn't update content after first run
Reply: 1

Bootstrap remote Modal doesn't update content after first run

Mr Pickel
1#
Mr Pickel Published in 2017-12-07 22:41:54Z

It comes javaScript and jQuery are beeing a big challenge for me. Like it's not enough I've started to use ajax to get over my problem - which is:

I've got some empty tables on my page. Each cell of a table has got its own id. A php-script is parsing a .xlsx file and puts the right link to the cell of my html table through javaScript code like:

document.getElementById("cellNrXY").innerHTML = "<a href=".../remoteContent.php">someLink</a>";

If the link is clicked, then a Modal (Bootstrap) appears and loads the remote content (which is different depending on the clicked link).

My problem was that the remote content was cached in modal, so it worked only on first run. After closing the modal and choosing another link the previous modal appeared und didn't change to the new remote content. I've read a lot solutions here that are based on:

 $(this).removeData('bs.modal');

but had no luck with it. After some trying with different solutions one worked properly. The only problem was: when I've clicked the second time on some other link, the modal opened up with previous content and it took some seconds for the modal beeing updated. This is why I wanted to show a rotating element while the new modal content is beeing loaded. Somewhere here I've read a solution tu use ajax for this, which I've added "on luck" and ... it worked:

$("#myModal").on("show.bs.modal", function(e) {
$.ajax({
beforeSend: function() { $('#myModal')
                        .html('<div class="rotatingElement"></div>')
                        .show(); },
complete: function() { $('#myModal').html.hide(); }
});
var link = $(e.relatedTarget);      
$(this).find(".modal-body").load(link.attr("href"));
});

The only thing is - I've no idea why this is working. Is there any chance that somebody here explain the functionality of this code to me?

Muhammad Omer Aslam
2#
Muhammad Omer Aslam Reply to 2017-12-07 22:55:51Z

if you read about the event show.bs.modal you will know that this event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event. Learn more about Events

so what is happening is every time you open a modal this event triggers and makes an ajax call which you see like this $.ajax({ wchi has 2 options set

  • A pre-request callback function beforeSend
  • A function to be called when the request finishes complete

so whenever the modal triggeres the ajax requet is made and every time ajax request i made just before sending the request the modal html is overridden $('#myModal').html('<div class="rotatingElement"></div>').show(); and a loader is added in form of a div element with class rotatingElement and as soon as the requet completes that loader is removed via complete function $('#myModal').html.hide(); and then the e.relatedTarget property as described above gets the anchor object and the href of that anchor .../remoteContent.php is loaded in side the modal body in the following 2 steps

var link = $(e.relatedTarget);
$(this).find(".modal-body").load(link.attr("href"));
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.34297 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO