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.

Reference URL


  1. Helen
    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. Dan
    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. Nikola Dadić
    Permalink to comment#

    try path/file.php beside /store

  4. KuZeKo
    Permalink to comment#

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

  5. DonAdnan
    Permalink to comment#

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

  6. shanem
    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

    • shanem
      Permalink to comment#

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

  7. Bastian
    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. Dilshan
    Permalink to comment#

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

  9. Lucas
    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.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.