Ajax Load Container Contents
Published by Chris Coyier
With jQuery, you can load not just the contents of a URL, but a specific CSS selector from within that URL. It's like this.
That finds the content in the file
something.html within the element with an ID of
contentand puts it on to the current page, inside the element with an ID of
But let's say that
something.html is actually extremely similar to the current page. Your goal is actually to replace #area with #area from
something.html. So you do this:
But that's problematic, because now you'll end up with:
<div id="area"> <div id="area"> <!-- stuff --> </div> </div>
And whatever triggered that action, if you did it again, would lead to even more nesting (bad).
The simple solution is to just grab all the contents of #area, rather than #area itself.
$("#area").load("something.html #area > *");
And the World's simplest (not feature full) demo:
This is particularly useful when:
- You are Ajaxing a site as a progressive enhancement, so each URL isn't just a fragment of data but a whole page that otherwise stands on it's own (and pages are of similar structure to each other).
- You don't want to add markup to the page like
<div id="inside"></div>just to get around this issue.
Thanks to Anthony Harris.