jQuery: Load Page in a Div

Loading an external page in a div using jQuery is as simple as calling the jQuery Load method. The Load() method loads data from the server and places the returned HTML into the matched element.
Assuming you have a Div called ‘divOne’ and an anchor link called ‘ext’. On clicking the anchor, a different page ‘from the same domain’ gets loaded.

jQuery Load External Page

See a Live Demo. When you click the link, observe how the entire page loads into this div.

Note: If you are trying load an external page from a ‘different domain’, you would either need to proxify data through your own server or use JSON-P. It will be a cross-domain call. Read this document to learn more.

Will you give this article a +1 ? Thanks in advance

About The Author

Suprotim Agarwal
Suprotim Agarwal, ASP.NET Architecture MVP (Microsoft Most Valuable Professional) works as an Architect Consultant and provides consultancy on how to design and develop Web applications.

Suprotim is also the founder and primary contributor to DevCurry, DotNetCurry and SQLServerCurry. He is the Editor of a Developer Magazine called DNC Magazine. He has also written two EBooks 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook

Follow him on twitter @suprotimagarwal


Hilversum said...

Actually, your example doesn't work - I'm finding that the entire div is replaced with the new content; it doesn't go into the div as expected.

Anonymous said...

I disagree, it works fine for me.

Avenirer said...

nope... it doesn't work...

Jaimoto Flautero said...

It loads the whole HTML