CODEWITHSUNDEEP
javascriptjquerybootstrap-4
Pankaj
Pankaj

Reputation: 3401

Javascript function available in another Bootstrap modal

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.

Upvotes: 1

Views: 163

Answers (1)

mylee
mylee

Reputation: 1333

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);
})();

Upvotes: 2

Related Questions