The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Load Only a Section of a Page

Last updated on:

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).

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>";

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed