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:
<?php
$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 = [
<?php
$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>
<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",
null,
contentLoaded); // javascript function contentLoaded() function is called
cur_hash = hash;
} else { // otherwise, load the home page
// start page
$(“#art-content").load(“main.php?noheader=false",
null,
contentLoaded);
cur_hash = ‘main’;
<?php
$page[‘page’] = ‘main.php’;
?>
}
}
$(document).ready(function(){
// After the DOM is done loading,
// Initialize history plugin.
// The callback is called at once by present location.hash.
$.historyInit(pageload);
// set onlick event for buttons
$(“a[rel=’history’]").click(linkClick);
});
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’])
.click(linkClick);
});
});
if(cur_hash) {
cur_hash = cur_hash.replace(/^.*#/, ");
$(“a[rel=’history’]").removeClass(‘active’);
$(‘#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.
$.historyLoad(cur_hash);
$(‘#link’).attr(‘href’).valueOf() = cur_hash;
return false;
}
// –>
</script>For more info on the jQuery Library, visit their website at http://jquery.com/.
Now for the html part…
<ul class="art-menu">
<?php
/*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";
}
?>
<li>
<a href="https://manzwebdesigns.com/" title="Opens in new window" target="_blank">
<span class="l"></span><span class="r"></span><span>MWD Events</span>
</a>
</li>
</ul>
<div class="art-content">
<!—jQuery code dumps the requested content here –>
</div>