Rectangle 27 0

ajax jQuery .load() call doesn't execute JavaScript in loaded HTML file?


<!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>
<script type="text/javascript">
    alert("Outside the jQuery ready");
    $(function() {
        alert("Inside the jQuery ready");
    });
 </script>

@Maxim Galushka I still had these files in my personal workstation. Without modification, they produced the correct behavior. I am using Firefox 3.6.13 on Windows 7.

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

Here is the contents of trackingCode.html:

Here is the driver page:

This works for me in Safari 4.

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

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?

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

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

Note
Rectangle 27 0

ajax jQuery .load() call doesn't execute JavaScript in loaded HTML file?


<!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>
<script type="text/javascript">
    alert("Outside the jQuery ready");
    $(function() {
        alert("Inside the jQuery ready");
    });
 </script>

@Maxim Galushka I still had these files in my personal workstation. Without modification, they produced the correct behavior. I am using Firefox 3.6.13 on Windows 7.

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

Here is the contents of trackingCode.html:

Here is the driver page:

This works for me in Safari 4.

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

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?

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

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

Note
Rectangle 27 0

ajax jQuery .load() call doesn't execute JavaScript in loaded HTML file?


$.getScript('ajax/test.js', function() {
  alert('Load was performed.');
});
jQuery.getScript( url, [ success(data, textStatus) ] )

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

Note
Rectangle 27 0

ajax jQuery .load() call doesn't execute JavaScript in loaded HTML file?


$("#images").load(location.href+" #images",function(){
    $.getScript("js/productHelper.js"); 
});

This did the trick for me. Here is an example that you can try: var frmAcademicCalendar = "frmAcademicCalendar.aspx" if (window.location.href.toLowerCase().indexOf(frmAcademicCalendar.toLowerCase()) >= 0) { $("#IncludeCMSContent").load("example.com #externalContent",function() { $.getScript("example.js"); }); }

really is $.getScript() good solution in this problem ;) +1

Note
Rectangle 27 0

ajax jQuery .load() call doesn't execute JavaScript in loaded HTML file?


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

Anyone have come across this?

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

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

Note
Rectangle 27 0

ajax jQuery .load() call doesn't execute JavaScript in loaded HTML file?


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

Anyone have come across this?

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

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

Note
Rectangle 27 0

ajax jQuery .load() call doesn't execute JavaScript in loaded HTML file?


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

A other version of John Pick's solution just before, this works fine for me :

Note
Rectangle 27 0

ajax jQuery .load() call doesn't execute JavaScript in loaded HTML file?


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

A other version of John Pick's solution just before, this works fine for me :

Note
Rectangle 27 0

ajax jQuery .load() call doesn't execute JavaScript in loaded HTML file?


$("#images").load(location.href+" #images",function(){
    $.getScript("js/productHelper.js"); 
});

This did the trick for me. Here is an example that you can try: var frmAcademicCalendar = "frmAcademicCalendar.aspx" if (window.location.href.toLowerCase().indexOf(frmAcademicCalendar.toLowerCase()) >= 0) { $("#IncludeCMSContent").load("example.com #externalContent",function() { $.getScript("example.js"); }); }

really is $.getScript() good solution in this problem ;) +1

Note
Rectangle 27 0

ajax jQuery .load() call doesn't execute JavaScript in loaded HTML file?


I have try to make one jquery plugin for html loading function. Please refer the following link.

Note