Using .load(url) doesn't let me use additional javascript

Question

I have this code in index.html file:

$(function(){
    $('a#link').live('click', function(e){ 
        $("div#element").load("file.html");
    });
});

In the file.html I have this code at the top

<script src="file.js" type="javascript"></script>

When I click on the link, the file loads fine, however the (according to firebug) the JavaScript file doesn't load. Does anyone know why? I tried put the script tags in the index.html file aswell, but it doesn't work like that.

What do you mean by "it doesn't work like that"? Isn't it just because the link to your js file is broken? — Christophe, Dec 11 '11 at 23:22
The link is probably fine. The problem is with the bogus "type" attribute value. There's really no point in using "type" unless you're explicitly trying to *prevent* script execution. — Pointy, Dec 11 '11 at 23:29
@PeterStuart the script URL - is it really a relative URL? If so, understand that it will be interpreted relative to the URL of the main page, and *not* the URL from the ".load()". Just guessing. — Pointy, Dec 12 '11 at 13:36

score 3 · Accepted Answer · edited May 23 '17 at 12:20

3

Try loading the page scripts after the page is loaded in your div as follow:

$(function(){
    $('a#link').live('click', function(e){ 
        $("div#element").load("file.html", function(){
            $.getScript("file.js", function(){
               // second page's scripts are loaded...
            });
        });
    });
});

A simpler way to fix this, as Pointy stated, is either to fix the type attribute or omit it.

edited May 23 '17 at 12:20

Community

1
1

answered Dec 11 '11 at 23:26

Pierre

18,643
4
41
62

1

Not necessary if the "type" attribute on that ` – Pointy Dec 11 '11 at 23:28
Also this requires that the loading code *know* the name of the script to load. What if the contents change? – Pointy Dec 11 '11 at 23:30
The question was clear. No one said anything about the content changing. Stop assuming :p – Pierre Dec 11 '11 at 23:38
I used the moethod, the files are loading, however the javascript files aren't responding to the file.html pahe, if that makes sense? – Peter Stuart Dec 12 '11 at 00:11
@Pointy I totally agree with you. However this is a specific question, that has very specific scope. If the question had begun with "I have X pages.." i would have thought of something a bit more dynamic... – Pierre Dec 12 '11 at 07:33

ncank · Answer 2 · 2011-12-11T23:28:04.733

2

if you need to load scripts, you can use getScript method instead

edited Dec 11 '11 at 23:28

answered Dec 11 '11 at 23:22

ncank

946
5
15

This is not true. When the payload returned from ".load()" has script tags in it, then jQuery finds them and runs them (if they've got the correct type). – Pointy Dec 11 '11 at 23:25

score 0 · Answer 3 · edited May 23 '17 at 12:03

0

When loading in html with javascript you normally need to remove the html head and body tags to make the javascript fire. I think this is also mentioned here jQuery .load() call doesn't execute javascript in loaded html file

edited May 23 '17 at 12:03

Community

1
1

answered Dec 11 '11 at 23:24

Dominic Green

10,142
4
30
34

score 0 · Answer 4 · answered Dec 11 '11 at 23:26

The problem is that when you ".load()" scripts like that, jQuery will only run them if there's no "type" attribute, or if the "type" attribute has the precise value "text/javascript". Anything else and it's completely ignored.

Your script has just "javascript" for that attribute, so it's thrown out.

Using .load(url) doesn't let me use additional javascript

4 Answers4