javascript - Load content from external page into another page using Ajax/jQuery

Question

Is there a way to do this?

page1.php --has

<div id="main">
   <div id="content">hello</div>
</div>

index.php --has

<div id="main">
</div>

Can I somehow grab the data from page1.php inside of the content div and load it into the main div in my index.php?

I have done this with the code provided at css-tricks url: http://css-tricks.com/examples/DynamicPage/

But this uses hash change events. I don't want to use the hash feature, just the load content feature, but I can't seem to isolate the code for that because I think it's built into the bbq hashchange plugin.

Is there an Ajax way of doing it?

Something like

$(selector).find('#main').load('#content');

Answer 1

Just put a filtering selector after the URL in .load's first argument:

$(document).ready(function() {
    $("#main").load('page1.php #content');
});

That will inject the #main div in the current page with the contents of #content from page1.php.