CODEWITHSUNDEEP
javascriptjquerytwitter-bootstraptwitter-bootstrap-3
dzona
dzona

Reputation: 3751

Bootstrap modal and inline scripts

I have a script that dynamically loads page content into bootstrap 3 modal. Here is some small snippet:

var modal = $('#my-modal');
var modalContent = modal.find('.modal-content');

modalContent.load(url, data, function () {
    modal.modal(options);
});

and this works fine, except when I need to run inline js script from loaded page, wrapped with <script> tag. Actually, it get it executed but every second time. Meaning if I have button to open a modal with some notes, when I press button it will open modal, and scripts are executed. If I close modal, and reopen it, it will not. Again, close and reopen...works...

Not worked even I destroy modal completely before initializing it again, I still have same issue.

var modal = $('#my-modal');
var modalContent = modal.find('.modal-content');

modalContent.load(url, data, function () {
    modal.modal('hide').data('bs.modal',null);
    modal.modal(options);
});

Edit: If I put same loaded content into any other div, it works fine!

Upvotes: 0

Views: 919

Answers (1)

dzona
dzona

Reputation: 3751

Still not sure what was causing this issue, but here is what solved it. I've clear modal content div each time modal is closed, so when new content is loaded, it is always loaded into empty modal content div.

This is script which initialize modal functions:

modal = $('#my-modal');
modal.on('hidden.bs.modal', function () {
    modal.find('.modal-content').empty();
});

Upvotes: 1

Related Questions