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.
This is a great way to run a mobile variant of your page. It will always be up to date then.
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?
try path/file.php beside /store
it seems it doesn’t work on ie7 when you try to load html5 selectors as section or article
can i partially load a part of another page in other site on other domain?
It’s great for static pages, but it doesn’t work in ie8 when I want to use querystrings and dynamic content
Turns out a random number in the querystring will fix this issue
I have a problem using this snippet. In fact the refresh results in a reloaded #mainNav nested in an other #mainNav. Why is that?
Hi,
good tips but i does not load external url (page).
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.
Wait a second! How does this affect SEO? if Google Search Bot parses this page and finds only part of the page, this will not work well for you…
Deep,
Check this page out –
https://buildyour.landrover.co.uk/lr2/r/exterior/paint/en_gb/l538_k19/3m0fr/a-5door_a-ed4-19_a-se/n-1ac?_ga=2.164135807.138502813.1541244152-1628470529.1538000123
and then this –
https://buildyour.landrover.co.uk/lr2/r/exterior/exterior_packs/en_gb/l538_k19/3m0fr/a-5door_a-ed4-19_a-se/n-1ac?_ga=2.164135807.138502813.1541244152-1628470529.1538000123
You will notice that these are two different URLs – and when you internally select another button in one of these pages to let’s say ‘Options’, you will notice that only the middle section of the page loads separately while the rest of the page stays untouched and the URL changes in the address bar as well. So, if this is the case – even if Google were to index these URLs, it wouldn’t be a bad UX as the user will land on the same page – amidst designing their Land Rover..