Issue with bootstrap modal

Question

I am loading content into bootstrap modal from external url (Ajax) . So for me when ever user click on the link, modal should open with latest data. But when I open modal first time it is loading content . But after closing and reopen again it is showing previous content only. Second time it is not communicating with external url. So for this I have replaced line at 1206 with this line of code in bootstrap.js (tried in version 3.3.5).

//if (!data) $this.data('bs.modal', (data = new Modal(this, options)))
New Line
if (!data || options.refresh) $this.data('modal', (data = new Modal(this, options)))

This is working fine, when I open and close modal and again open always it is fetching content via external url. Now the issue is , In that modal I have some textfields with some general validations. For this I have used bootbox. Now when ever field is empty bootbox.alert() is firing, but when I click on Ok button it is not closing . And after submitting data from modal , modal is also not closing. Even I have used this in Ajax success response jQuery('#listmodal_popup').modal('hide');

But when I comment this line from bootstrap.js and uncomment previous one this working fine with closing modal after submit and closing bootbox.alert.

if (!data || options.refresh) $this.data('modal', (data = new Modal(this, options)))

So how to solve this problem? Any help would be greatly appreciated.

Answer 1

It's never a good idea to alter the framework's code - a year later you will do an update and you will forget about this and things will start breaking. I know, this is not the case, but for future reference :)

Add this as the first thing after DOM ready

$.ajaxSetup({ cache: false })

This will disable caching of all AJAX requests done through jQuery, from now on. If this is an issue, you should disable caching only when opening the modal and enabling it back afterwards.

Answer 2

Here is the fix that I have found.

jQuery('body').on('hidden.bs.modal', '.modal', function () {
  jQuery(this).removeData('bs.modal');
});

This is working for me, every time when I click on the link, it is communicating with external url and fetching latest data.