PSD to HTML conversion PSD to HTML conversion PSD2HTML.com with over 300 professionals takes the designs to HTML and beyond

Code Snippet

Home » Code Snippets » jQuery » Load Only a Section of a Page

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

Subscribe to The Thread

  1. Helen

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

    Reply ↓
  2. Dan

    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?

    Reply ↓
  3. Nikola Dadić

    try path/file.php beside /store

    Reply ↓
  4. KuZeKo

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

    Reply ↓
  5. DonAdnan

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

    Reply ↓
  6. shanem

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

    Reply ↓
    • shanem

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

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~