Best IT Recipes

Calling jQuery.load () does not execute JavaScript in the loaded HTML file

This seems to be a Safari only issue. I tried 4 on Mac and 3 on Windows, and I'm still out of luck.

I am trying to load an external HTML file and execute inline JavaScript.

The code I'm trying to use is as follows:

$("#myBtn").click(function() { $("#myDiv").load("trackingCode.html"); });

trackingCode.html looks like this (just now, but will expand once / if I get this working):

 <html> <head> <title>Tracking HTML File</title> <script language="javascript" type="text/javascript"> alert("outside the jQuery ready"); $(function() { alert("inside the jQuery ready"); }); </script> </head> <body> </body> </html>

I see both warnings in IE (6 and 7) and Firefox (2 and 3). However, I cannot see the messages in Safari (the last browser I need is the project requirements - please, no fiery wars).

Any thoughts on why Safari ignores JavaScript in the trackingCode.html file?

In the end, I would like to be able to pass JavaScript objects to this trackingCode.html file, which will be used in the jQuery ready call, but I would like to make sure that this is possible in all browsers before I go down this road.

+70
jquery safari ajax
May 20 '09 at 20:07
source share
10 answers

You load the entire HTML page into your div, including the html, head and body tags. What happens if you download and just run the script by closing the script and JavaScript code in the downloadable HTML?

Here is the driver page:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <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"></script> <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.

Update: Added the DOCTYPE and html namespace to match the code in my test environment. Tested with Firefox 3.6.13 and sample code works.

+50
May 20, '09 at 20:10
source share
 $("#images").load(location.href+" #images",function(){ $.getScript("js/productHelper.js"); });
+34
Nov 22 '10 at 21:47
source share

Another version of John Pick solution , this works fine for me:

 jQuery.ajax({ .... success: function(data, textStatus, jqXHR) { jQuery(selecteur).html(jqXHR.responseText); var reponse = jQuery(jqXHR.responseText); var reponseScript = reponse.filter("script"); jQuery.each(reponseScript, function(idx, val) { eval(val.text); } ); } ... });
+19
Sep 07 '11 at 7:11
source share

I understand that this is rather an old post, but for everyone who comes to this page, he is 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) is a callback function that is executed if the request completes successfully.

 $.getScript('ajax/test.js', function() { alert('Load was performed.'); });
+12
Feb 23 2018-10-23T00
source share

This does not work if you load the HTML field into a dynamically created element.

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

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

Has anyone come across this?

+7
Jun 28 '10 at 23:51
source share

Test this with trackingCode.html:

 <script type="text/javascript"> $(function() { show_alert(); function show_alert() { alert("Inside the jQuery ready"); } }); </script>
+2
Aug 03 '09 at 11:38
source share

I am trying to create one jquery plugin for the html upload function. Please refer to the following link.

http://webtech-training.blogspot.in/2010/10/dyamic-html-loader.html

Please suggest me improve it more.

Thanks Mohan

+2
Nov 12 '10 at 15:50
source share

You almost got it. Tell jquery that you only want to load the script:

 $("#myBtn").click(function() { $("#myDiv").load("trackingCode.html script"); });
+2
Aug 31 2018-11-11T00:
source share

Well, I had the same problem that it would seem to be only for Firefox, and I could not use another JQuery command other than .load (), since I modified the front-end with exisitng PHP files ...

Anyway, after using the .load () command, I embedded my jQuery script in the external HTML code that was loading, and it seemed to work. I do not understand why the JS that I downloaded at the top of the main document did not work for the new content, however ...

0
Jun 14 '10 at 3:22
source share

I was able to fix this problem by changing $(document).ready() to window.onLoad() .

0
May 20 '13 at 2:34
source share


More articles:


All Articles