Web Dev .NET: Embedding HTML from jQuery AJAX Call Into Your Page

Monday, December 28, 2009

Embedding HTML from jQuery AJAX Call Into Your Page

I got an interesting Twitter question the other day and thought I would blog about it to help anyone who has a similar situation.

Question

Hey buddy! How can I do a simple thing as loading a page into a div using Ajax and on the loaded page, execute a simple task as executing a javascript with an alert box?!? The page is loaded but the javascript just doesn't run! If I access the page direct directly, the alert pops out ok! --@montedesucata

Scenario 1

My initial thoughts were that he was trying to put an entire HTML document (pulled back from an AJAX call) inside another HTML document (the document that made the AJAX call). You can't do that because then you’d have two html elements, two head elements, two body elements, etc... in one document. So, my first example was to put the contents into an iFrame.

Note: You can also, strip out the body content of the returned full HTML document and inject that into your current document, but then you might not have the correct scripts or css files that were included in the head element (or wherever you put those).

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Load Full HTML Document via AJAX into iFrame</title>
   <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
   <style>
      .dynamicIframe { 
         display: none; width: 100%; border: none 1px black; 
      }
   </style>   
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
   <script type="text/javascript">
   $(function() {
      $('#load').click(function() {
         $.ajax({
            type: "GET",
            url: "FullTestHtmlWithAlert.html", 
            dataType: "html",
            success: function(html) {
               $("#dynamicContent")
                  .contents().find("body")
                  .html(html).end().end()
                  .fadeIn('slow');               
            }
         });
         return false;
      });
   });
   </script>   
</head>
<body>
   <h3>Load Full HTML Document via AJAX into iFrame</h3>
   <button id="load">Load</button><br/>
   <iframe id="dynamicContent" class="dynamicIframe"></iframe><br/>
</body>
</html>

The contents of the FullTestHtmlWithAlert.html are below…

<!-- FullTestPageWithAlert.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Load Full HTML Document via AJAX into iFrame</title>
   <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
   <script type="text/javascript">
      alert('Hello World!');
   </script>
</head>
<body>
   <h3>Hello World From Full Html Document</h3>
</body>
</html>

The following is a screenshot of the results after clicking the Load button.

Feel free to Demo the above code below...

Scenario 2

The other scenario is that the HTML from the AJAX call is a partial document, meaning that it doesn’t include html, head, body, etc… tags and is just content that might be found in a body tag. This is a simpler case and the results can easily be injected into another DOM element in the document.

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Load Full HTML Document via AJAX into iFrame</title>
   <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
   <script type="text/javascript">
   $(function() {
      $('#load').click(function() {
         $.ajax({
            type: "GET",
            url: "PartialTestHtmlWithAlert.html", 
            dataType: "html",
            success: function(html) {
               $('#dynamicContent').html(html)
                  .fadeIn('slow');
            }
         });
         return false;
      });      
   });
   </script>   
</head>
<body>
   <h3>Load Parital HTML Document via AJAX into Div</h3>
   <button id="load">Load</button><br/>
   <div id="dynamicContent" style="display: none;"></div>
</body>
</html>

The contents of the PartialTestHtmlWithAlert.html are below…

<!-- PartialTestPageWithAlert.html -->
<script type="text/javascript">
alert('Hello World!');
</script>
<table>
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>a</td>
        <td>b</td>
    </tr>
</table>

The following is a screenshot of the results after clicking the Load button.