Load Only a Section of a Page

Use Case

You want to AJAX load a section of another page on your site onto the current page. Say your eCommerce CMS system creates a dynamic menu of products, but that exists as a subdirectory of your site and you want to use that on the homepage.


$("#mainNav").load("/store #mainNav")

The first param is the URL (only works for same-domain requests!) and the second (well, technically it's still part of the first, separated by a space) is a jQuery selector of the part to load. Not passing the second selector param will load the entire page. There is an optional third parameter, a callback function, which will run when the load is complete.


  1. User Avatar
    Permalink to comment#

    This is a great way to run a mobile variant of your page. It will always be up to date then.

  2. User Avatar
    Permalink to comment#

    Hmm, I tried using this with the div that ‘sidebar.php’ loads within and it doesn’t work.

    My code looks like this:

    $(“#left_col”).load(“/store #left_col”)

    Any ideas?

  3. User Avatar
    Nikola Dadić
    Permalink to comment#

    try path/file.php beside /store

  4. User Avatar
    Permalink to comment#

    it seems it doesn’t work on ie7 when you try to load html5 selectors as section or article

  5. User Avatar
    Permalink to comment#

    can i partially load a part of another page in other site on other domain?

  6. User Avatar
    Permalink to comment#

    It’s great for static pages, but it doesn’t work in ie8 when I want to use querystrings and dynamic content

    • User Avatar
      Permalink to comment#

      Turns out a random number in the querystring will fix this issue

  7. User Avatar
    Permalink to comment#

    I have a problem using this snippet. In fact the refresh results in a reloaded #mainNav nested in an other #mainNav. Why is that?

  8. User Avatar
    Permalink to comment#

    good tips but i does not load external url (page).

  9. User Avatar
    Permalink to comment#

    The problem with this method, is that it grabs the entire page with jQuery, and then parses only what you want to be displayed. So, for instance, if you ask for one div on a page and that page has relative paths to images (I.E. /images/image.jpg) then it’s going to throw a “not found” error in your console log for every image on the page with a relative path, despite the fact that you probably aren’t even requesting those images.

    I wish that there was a way to not just retrieve one div of a page, but request only one div on a page.

  10. User Avatar
    Deep Janardhanan

    Wait a second! How does this affect SEO? if Google Search Bot parses this page and finds only part of the page, this will not work well for you…

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.