Embedding HTML from jQuery AJAX Call Into Your Page
29 Dec 2009I 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>
<meta charset=utf-8 />Load Full HTML Document via AJAX into iFrame
Load Full HTML Document via AJAX into iFrame
The contents of the FullTestHtmlWithAlert.html are belowโฆ
<!DOCTYPE html>
<meta charset=utf-8 />Load Full HTML Document via AJAX into iFrame
Hello World From Full Html Document
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>
<meta charset=utf-8 />Load Full HTML Document via AJAX into iFrame
Load Parital HTML Document via AJAX into Div
The contents of the PartialTestHtmlWithAlert.html are belowโฆ
| 1 | 2 |
| a | b |
The following is a screenshot of the results after clicking the Load button.
Feel free to Demo the above code below...
