Grow your CSS skills. Land your dream job.

Last updated on:

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.

jQuery

$("#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

Comments

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

    $(document).ready(function(){
    $(“#left_col”).load(“/store #left_col”)
    });

    Any ideas?

  3. try path/file.php beside /store

  4. 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?

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".