Dynamic Page Content Replacement using AJAX and PHP Tutorial

In this tutorial, I will show you how to use PHP and jQuery to dynamically change webpage content.

All this code should be done in the <HEAD> portion of your index page:

Include the various javascript files needed:

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.history.js"></script>

Create a PHP multi-dimensional array of all pages:


$pages = Array(

Array(page => ‘main.php’, title => ‘Home’, hash => ‘main’),

Array(page => ‘portfolio.php’, title => ‘Portfolio’, hash => ‘portfolio’),

Array(page => ‘templates.php’, title => ‘Templates’, hash => ‘templates’),

Array(page => ‘price.php’, title => ‘Pricing’, hash => ‘price’),

Array(page => ‘contact.php’, title => ‘Contact Us’, hash => ‘contact’),

Array(page => ‘policy.php’, title => ‘Privacy Policy’, hash => ‘policy’)



Since PHP is pre-processed at the server, we can use the array created above to populate a javascript associative array:

<script type="text/javascript">

// [CDATA[

var pages = [


$i = 0; // count variable

$end = “‘ },\n”; // variable for the end of the array variable

$page_count = count($pages); // number of pages for the site

foreach ($pages as $page) { // Iterate through the PHP array

if ($i++ == $page_count) { // current page is last page,

$end = “‘ }\n”; // close the array.


echo “\t\t{ title: ‘{$page[‘title’]}’, hash: ‘” . $page[‘hash’] . $end; // output the array values for the javascript array




// ]]


<script type=”text/javascript”>

// <!–

// PageLoad function

// This function is called when:

// 1. after calling $.historyInit();

// 2. after calling $.historyLoad();

// 3. after pushing “Go Back” button of a browser

function pageload(hash) {

// hash contains a value, let’s use it.

if(hash) {

// restore ajax loaded state

// Load data from the server and place the returned HTML into

// the matched element.

$(“#art-content”).load(hash + “.php?noheader=false”,


contentLoaded); // javascript function contentLoaded() function is called

cur_hash = hash;

} else { // otherwise, load the home page

// start page




cur_hash = ‘main’;


$page[‘page’] = ‘main.php’;





// After the DOM is done loading,

// Initialize history plugin.

// The callback is called at once by present location.hash.


// set onlick event for buttons



function contentLoaded() {

// for each page, make any links that go to that page

// use the hash-mark href instead and have rel=’history’

// so that they use the jquery history plugin to process

// and load their content through ajax instead of a link

$(function() {

$.each(pages, function(i, val) {

$(‘a[href=’ + val[‘hash’] + ‘.php]’)

.attr(‘rel’, ‘history’)

.attr(‘href’, ‘#’ + val[‘hash’])




if(cur_hash) {

cur_hash = cur_hash.replace(/^.*#/, ”);


$(‘#l_’ + cur_hash).addClass(‘active’);



var cur_hash;

function linkClick() {

cur_hash = this.href;

cur_hash = cur_hash.replace(/^.*#/, ”);

// moves to a new page.

// pageload is called at once.


$(‘#link’).attr(‘href’).valueOf() = cur_hash;

return false;


// –>


For more info on the jQuery Library, visit their website at http://jquery.com/.

Now for the html part…

<ul class="art-menu">


/*construct the menu from the item array built in the head section */

foreach ($pages as $item) {

echo “<li><a id=\”l_{$item[‘hash’]}\” href=\”{$item[‘page’]}\”><span class=\”l\”></span><span class=\”r\”></span><span class=\”t\”>{$item[‘title’]}</span></a></li>\n”;




<a href=”http://www.manzwebdesigns.com/” title=”Opens in new window” target=”_blank>

<span class=”l”></span><span class=”r”></span><span>MWD Events</span></a>



<div class=”art-content”>

<!—jQuery code dumps the requested content here –>


Bud Manz is a strong advocate of the Open Source movement, believing that the way to making one's self the best they can be is most effectively accomplished by helping other people succeed. He enjoys arranging (and singing!) hymns, gardening, and most things geeky :)


Leave a reply