jQuery .load() call doesn’t execute JavaScript in loaded HTML file

by

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:

<!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 DOCTYPE and html namespace to match the code on my test environment. Tested with Firefox 3.6.13 and example code works.

More Related Contents:

  1. json Uncaught SyntaxError: Unexpected token :
  2. jQuery ajax (jsonp) ignores a timeout and doesn’t fire the error event
  3. AJAX in Chrome sending OPTIONS instead of GET/POST/PUT/DELETE?
  4. jQuery won’t parse my JSON from AJAX query
  5. How can I load webpage content into a div on page load?
  6. jQuery ajax success anonymous function scope
  7. How to know when all ajax calls are complete
  8. Ajax in Jquery does not work from local file
  9. Ajax request with JQuery on page unload
  10. jQuery – Illegal invocation
  11. How to make Asynchronous(AJAX) File Upload using iframe?
  12. Cannot properly set the Accept HTTP header with jQuery
  13. JQUERY ajax passing value from MVC View to Controller
  14. wait for a jquery ajax callback from calling function
  15. Why cant I load an external resource from jQuery load method?
  16. Check if username exists in database with AJAX
  17. Redirecting after AJAX post in Django
  18. How to return a JSON object in standard web forms .Net
  19. How do I pass a Dictionary as a parameter to an ActionResult method from jQuery/Ajax?
  20. jQuery ajax request being block because Cross-Origin
  21. Disable scrolling when changing focus form elements ipad web app
  22. iOS Safari – How to disable overscroll but allow scrollable divs to scroll normally?
  23. Selecting text on focus using jQuery not working in Safari and Chrome
  24. Populate Select box options on click with Javascript/Jquery with Json data
  25. Display PNG image as response to jQuery AJAX request
  26. AJAX Post of JavaScript String Array to JsonResult as List Always Returns Null?
  27. How to submit form without refreshing page using Django, Ajax, jQuery?
  28. Invoke ColdFusion function using AJAX
  29. Targeting multiple forms to send via ajax (jquery)
  30. How to Set Selected value in Multi-Value Select in Jquery-Select2.?

Leave a Comment