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.

About The Author

Suprotim Agarwal
Suprotim Agarwal, Developer Technologies MVP (Microsoft Most Valuable Professional) is the founder and contributor for DevCurry, DotNetCurry and SQLServerCurry. He is the Chief Editor of a Developer Magazine called DNC Magazine. He has also authored two Books - 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...

Unknown said...

It loads the whole HTML