Javascript function available in another Bootstrap modal

Question

I am using Bootstrap modal in my project and I have the following scenario. I have one html page Index.html which contains code to open bootstrap modal on button click using following code.

jQuery('#modellink').click(function(e) {
  $('.modal-container').load(url,function(result){
    $('#myModal').modal({show:true});
  });
});

In the load method URL load dynamically. The issue is that when I load modalbox.html into bootstrap modal which contains test() javascript function. After that when I again load another HTML file modalbox1.html which does not contain any javascript function. Even if modalbox1.html does not contain any javascript function then also test() javascript function is available since modalbox.html opened previously. So please help me how can I resolved this issue.

test contains empty body.below is my test function. function test(){ }.The test() function available when I load another html in modal. — Pankaj
– Pankaj, Commented Feb 13, 2019 at 10:18
I have separate project to create above scenario. Where to upload?Please let me know. — Pankaj
– Pankaj, Commented Feb 18, 2019 at 6:57
Scripts in dynamic content are tricky because they may or may not work exactly as you expect. I normally try to put them in the main view instead of the AJAX code, or in a script file that gets loaded along with the AJAX call. — Brian Mains
– Brian Mains, Commented Feb 18, 2019 at 12:26

mylee · Accepted Answer · 2019-02-19 09:22:47Z

2

+25

From my understanding based on your explanation, you do not want the function test() to be available for another HTML file loaded with AJAX correct?

This can be easily accomplished by declaring the function in a different closure (How do JavaScript closures work?)

In other words, to enclose it within another function, like

(function() {
    //test is declared within the scope of the outer function only so it will not be available in the global closure, i.e. available to other HTML loaded after this
    function test() {
        //do something here
    }
    document.getElementById("someButton").addEventListener("click", test);
})();

answered Feb 19, 2019 at 9:22

mylee

1,3531 gold badge9 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Javascript function available in another Bootstrap modal

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related