1

.load() – Advanced

Besides simply loading dynamic website content into a [div] tag with jQuery's .load(), you can also load just a specific section of a page, define the webpage path with variables, and even pass URL paramaters in the address.

.load() Only a Specific Section of Content

If you only want to load a specific part of the page, you can add an element selector after the webpage path.

These will all load only a specific part of the page.
  1. $('#myDynamicDiv').load('mypages/pagetoload.html #contentDiv');
  1. $('#myDynamicDiv').load('mypages/pagetoload.html #mainCol .primaryDoc');
  1. $('#myDynamicDiv').load('mypages/pagetoload.html .article:first');

.load() Using Variables

You can also use a string variable that contains the path to the webpage or only part of the path, like the filename.

These will all load the same page, but use different variables
  1. $('#myDynamicDiv').load('mypages/'+myPage+'.html');
  1. $('#myDynamicDiv').load(myDirectory+'myPage.html');
  1. $('#myDynamicDiv').load(pathToMyPage+tplExtension);

.load() and Passing URL Parameters

The end of the URL can have parameters also. Consider combining several URL parameters into a single string, like example 3.

These will all load the same page, but pass different parameters
  1. $('#myDynamicDiv').load('mypages/pagetoload.html?item=519);
  1. $('#myDynamicDiv').load('mypages/pagetoload.html?news='+newsId+'&ver=1);
  1. $('#myDynamicDiv').load('mypages/pagetoload.html?'+urlParamString);

.load() Using Several Options

Finally, you can combine all these extra options together (you may produce cleaner code if you use the .get() method).

This will load only a specific part of the page using variables, and pass URL parameters to the page
  1. $('#myDynamicDiv').load('mypages/'+myPage+'.html?news='+newsId+'&'+urlParamString+' #mainCol .primaryDoc');

Let's get started!

Let's get into contact so you learn more about us and we can create solutions for you!