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

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like ```this```. You don't need to escape code in backticks, Markdown does that for you.

Sadly, it's kind of broken. WordPress only accepts a subset of HTML in comments, which makes sense, because certainly some HTML can't be allowed, like <script> tags. But this stripping happens before the comment is processed by Markdown (via Jetpack). It seems to me that would be reversed, because after Markdown processes code in backticks, it's escaped, thus safe. If you think you can fix this issue, get in touch!

If you need to make sure the code (typically HTML) you post absolutely posts correctly, escape it and put it within <pre><code> tags.

Current ye@r *

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