ansaurus

Question

jQuery .load() call doesn't execute javascript in loaded html file

Answer 1

+13 A:

You are loading an entire HTML page into your div, including the html, head and body tags. What happens if you do the load and just have the opening script, closing script, and JavaScript code in the HTML that you load?

Here is the driver page:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Load of Script</title>
<script type="text/javascript" src="http://www.google.com/jsapi"&gt;&lt;/script&gt;
<script type="text/javascript">
   google.load("jquery", "1.3.2");
</script>
<script type="text/javascript">
   $(document).ready(function(){
    $("#myButton").click(function() {
 $("#myDiv").load("trackingCode.html");
    });
   });
</script>
</head>
<body>
<button id="myButton">Click Me</button>
<div id="myDiv"></div>
</body>
</html>

Here is the contents of trackingCode.html:

<script type="text/javascript">
    alert("Outside the jQuery ready");
    $(function() {
    alert("Inside the jQuery ready");
    });
 </script>

This works for me in Safari 4.

Tony Miller 2009-05-20 20:10:42

Got it, thanks Tony! Removing the <html>, <head> and <body> tags seemed to do the trick.

Mike 2009-05-20 21:18:10

i was wandering whether i should do a seperate ajax call getJson() because i heard of this.. But if it works like that it is ok!! I would call the same queries twice otherwise

Parhs 2010-10-23 16:46:22

Answer 2

+1 A:

Ignore this, I misunderstood!

I assume you have included the jquery js in there somewhere and left it out of your code example?

Because if I include jquery, this works great in Safari on the PC...

larson4 2009-05-20 20:16:12

Betcha you nailed it :)

wcm 2009-05-20 20:20:32

Right, so there's two pages, the first (which includes the jQuery click event contains the reference to the jQuery framework) and the second (which is to be loaded into the first - trackingCode.html in this example).The second doesn't even render the first alert message (which is outside of the jQuery ready function).

Mike 2009-05-20 20:51:17

hold on a minute... OK, I see what you are doing but it is not going to work. You can't stick an <html>...</html> block inside of a div and expect that to work... I misinterpreted what you were doing because it is so.. bizarre. Tony Miller's on the right track below

larson4 2009-05-20 21:16:05

This functionality is not bizarre, but quite common. Consider lightboxes, and such. They don't load the HTML tags, but it is essentially what Mike is trying to do. It is basically a client-side user control.

Russell 2010-07-26 23:35:16

Answer 3

A:

Test with this in trackingCode.html:

$(function() { show_alert(); function show_alert() { alert("Inside the jQuery ready"); } });

2009-08-03 11:38:31

Answer 4

A:

@Tony Miller

Your code is not actually working in FF (IE8 - working fine). Is there a way to make this work in all the browsers?

Thanks

Maxim Galushka 2009-11-16 20:10:23

Sounds like you have a typo.

Hogan 2010-07-26 23:37:45

Answer 5

A:

Hmm just ran into the same issue...

I'm thinking of moving it into my javascript main file, and executing it after it's loaded... =\

William 2009-11-30 22:35:03

Answer 6

A:

I realize this is somewhat of an older post, but for anyone that comes to this page looking for a similar solution...

http://api.jquery.com/jQuery.getScript/

jQuery.getScript( url, [ success(data, textStatus) ] )
url - A string containing the URL to which the request is sent.

success(data, textStatus) - A callback function that is executed if the request succeeds.
$.getScript('ajax/test.js', function() {
  alert('Load was performed.');
});

ryan 2010-02-23 22:07:50

Answer 7

A:

Hey mate,

Thanks heaps for that last post "better late than never" ;-) really helped!

Rod 2010-04-07 06:00:13

down voted, this is not an answer to the question.

SooDesuNe 2010-09-29 03:03:46

Answer 8

A:

Well I had the same problem that only seemed to happen for Firefox, and I couldn't use another JQuery command except for .load() since I was modifying the front-end on exisitng PHP files...

Anyways, after using the .load() command, I embedded my JQuery script within the external HTML that was getting loaded in, and it seemed to work. I don't understand why the JS that I loaded at the top of the main document didn't work for the new content however...

Victor G. Reano 2010-06-14 03:22:56

Answer 9

A:

This doesn't seem to work if you're loading the HTML field into a dynamically created element.

$('body').append('<div id="loader"></div>');
$('#loader').load('htmlwithscript.htm');

I look at firebug DOM and there is no script node at all, only the HTML and my CSS node.

Anyone have come across this?

tim 2010-06-28 23:51:13

Yup, same problem.

Dex 2010-08-19 05:33:46

I had to load the html, then in the callback, use $.getScript to get the javascript.

Dex 2010-08-19 05:55:04

Answer 10

A:

@tim

yeah I'm having the same problems, I can't seem to be able to load content into dynamically created elements either. Did you ever find what the problem was? I'd love to know the answer

dracuella 2010-07-24 13:06:21

also not an answer

SooDesuNe 2010-09-29 03:05:26

Answer 11

A:

Am I correct in thinking that jQuery is purging anything and everything inside the head tag?

WaveTyDesigns 2010-07-26 23:18:43

Yes, that is the difference in the answer marked correct.

Hogan 2010-07-26 23:36:51

ansaurus

tags:

views:

answers:

jQuery .load() call doesn't execute javascript in loaded html file

related questions