Can we load particular external java script files to particular div

Question

I have two div in my html file and I am using two external javascript files.but the problem is when I am using both the js file together I am not getting the required functionality.so I want to restrict the use of js file to particular div

e.g: div1 should only use js1 file and div2 should only use js2 file so that no clash happens and I get the required functionality.

I am making a web app which is using lot number of widgets and these widgets are getting loaded from the database.there is one admin panel where a admin can add widgets.i am fetching all the widget's code from the database in a same page.so in future it may happen that after adding lot many widgets and there related js files they clashes and create problme.so i want to restrict there use to certain widget

There are lots of ways you can use JavaScript to only affect the contents of a certain div. Perhaps post your code and someone can see what's most relevant here. — Steve Bennett, Sep 01 '14 at 06:15
I've answered the question you actually asked, but I'm fairly certain that if you tell us more about your problem, there's a better approach to take rather than trying to limit JavaScript to a specific div. — T.J. Crowder, Sep 01 '14 at 06:15
Why don't tell us what you want to achieve? http://meta.stackexchange.com/questions/66377/what-is-the-xy-problem — Rudy, Sep 01 '14 at 06:20

score 1 · Answer 1 · answered Sep 01 '14 at 06:15

1

Within a page (browsing context), there is only one JavaScript environment. To get the kind of isolation you're referring to, you'd have to create a separate browsing context by using an iframe or similar.

answered Sep 01 '14 at 06:15

T.J. Crowder

1,031,962
187
1,923
1,875

I am making a web app which is using lot number of widgets and these widgets are getting loaded from the database.there is one admin panel where a admin can add widgets.i am fetching all the widget's code from the database in a same page.so in future it may happen that after adding lot many widgets and there related js files they clashes and create problme.so i want to restrict there use to certain widget – amit kumar Sep 01 '14 at 06:41
@amitkumar: To get that kind of isolation, you'd have to make them `iframe`s. – T.J. Crowder Sep 01 '14 at 06:58

score 0 · Accepted Answer · answered Sep 01 '14 at 06:15

no what you are saying isnt possible. but what instead you can do is use diff scope for diff javascripts.
If they are your own written js files
1. then simply change all the variables to be the properties of a global variables.
2. do not be dependent on the window variable
3. if your are using DOM manipulation using class names / tag names / attribute values which are common for both of the divs change them and also change the respective value on the div. So that you can access them sperately.

if they are one of the popular js libraries like jquery / _js / backbone use the default no conflict option provided to load separate versions and then use them separately on the two separate divs.

score 0 · Answer 3 · edited May 23 '17 at 10:29

I am not sure if you are using jquery or plain javascript.

if it is jquery then you can use jquery noconflict. Create separate aliases to use jquery for div1 & div2

    <script>

        var div1Alias = $.noConflict();
        var div2Alias = div1Alias.noConflict();
        jQuery(document).ready(function(){
             alert(div1Alias( "#div1" ).html());
             alert(div2Alias( "#div2" ).html());
        });
    </script>

http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/ How do I implement JQuery.noConflict() ?

Can we load particular external java script files to particular div

3 Answers3