{"id":8392,"date":"2011-01-28T10:55:08","date_gmt":"2011-01-28T17:55:08","guid":{"rendered":"http:\/\/css-tricks.com\/?p=8392"},"modified":"2011-01-28T10:55:08","modified_gmt":"2011-01-28T17:55:08","slug":"ajax-load-container-contents","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/ajax-load-container-contents\/","title":{"rendered":"Ajax Load Container Contents"},"content":{"rendered":"

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.<\/p>\n

$(\"#area\").load(\"something.html #content\");<\/code><\/pre>\n
That finds the content in the file something.html<\/code> within the element with an ID of content<\/code>and puts it on to the current page, inside the element with an ID of area<\/code>. <\/p>\n
But let’s say that something.html<\/code> is actually extremely similar to the current page. Your goal is actually to replace<\/em> #area with #area from something.html<\/code>. So you do this:<\/p>\n
$(\"#area\").load(\"something.html #area\");<\/code><\/pre>\n
But that’s problematic, because now you’ll end up with:<\/p>\n
<div id=\"area\">\r\n    <div id=\"area\">\r\n         <!-- stuff -->\r\n    <\/div>\r\n<\/div><\/code><\/pre>\n
And whatever triggered that action, if you did it again, would lead to even more nesting (bad).<\/p>\n
The simple solution is to just grab all the contents of #area, rather than #area itself.<\/p>\n
$(\"#area\").load(\"something.html #area > *\");<\/code><\/pre>\n
And the World’s simplest (not feature full) demo:<\/p>\n
View Demo<\/a><\/p>\n
This is particularly useful when:<\/p>\n