Monthly Archives: November 2012

Load page into div via Ajax using jQuery

As per title here I explain how to load web page content into container via Ajax request. There are different way to load content at run time but here we will see jQuery.load() function in order to load content.

jQuery.load()

The .load() function is simple to use and more powerful. You can pass query parameter in it as well as call callback function after loading page content.

Syntax of jQuery.load().

jQuery.load(url[, data][, complete function]);

Step 1:

First thing’s first. Download latest release stable version of jQuery and lint to your page.

<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript”>
jQuery(funciton(){
// Your stuff here
});
</script>

Step 2:

Make anchor and div container to load data.

<a href=”javascript:void(0)” id=”loadPage”>Click To Load Web Page</a><br />
<div id=”pagecontainer” />

Step 3:

Make anchor link JavaScript function on jQuery load function.

<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript”>
jQuery(function(){
jQuery(‘#loadPage’).click(function(){
// code for loading page runtime.
// Method 1
jQuery(‘#pagecontainer’).load(‘yourpagename’);
// Method 2
jQuery(‘#pagecontainer’).load(‘yourpagename’, {‘firstname’:’Sourcecodemart’});
// Method 3
jQuery(‘#pagecontainer’).load(‘yourpagename’, {‘firstname’:’Sourcecodemart’}, function(){alert(‘Content Successfully Loaded.’)});
})
});
</script>

A complete source code.

Click to View Live Demo