Before that i wanted to tell you the folder structure, keep all your files(.php etc) in the /includes folder and index.php file in the root folder and function.js in the js folder.
Page: function.js
var defaultpage = 'includes/map.php';
var includesdir = 'includes';
var loading = 'Loading...';
var site = {};
function getcontent(file)
{
//Funtion to hide the address bar
hideAddressBar();
var xmlhttp;
var contentloader = $get('content');
var pagehash = file.split('includes/');
if (window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
alert("Your browser does not support XMLHTTP!");
}
xmlhttp.onreadystatechange = function()
{
if(xmlhttp.readyState == 4)
{
contentloader.innerHTML = xmlhttp.responseText;
window.open('#' + pagehash[1], '_self');
}
else
{
$get('content').innerHTML = '<div style="position:absolute;left:45%;top:43%;"><img src="images/loading-small.gif"></div>';
}
}
xmlhttp.open("GET", file, true);
xmlhttp.send(null);
// alert('PageSet-->'+ pagehash[1]);
$get('hash').value = pagehash[1];
//checkHash()
}
function $get(stringId)
{
return document.getElementById(stringId);
}
function loadDefaultPage()
{
getcontent(defaultpage);
//checkHash();
}
site.init = function()
{
if (window.addEventListener)
{
window.addEventListener('load', function (a)
{
loadDefaultPage();
}, false);
}
if (window.ActiveXObject)
{
window.attachEvent('onload', function (a)
{
loadDefaultPage();
});
}
};
site.init();
The following bellow code to load the default page of the application(map.php) and if you want to include the other page then the getcontent() function will get the page.
page: index.php
<html>
<head>
</head>
<body onhashchange="urlCahngeHandle();">
<div id="content"></div>
<input type="hidden" id="hash" />
<a href="#login.php" title="My Account">My Account</a>
<a href="#map.php" title="Map">Map</a>
<a href="#more.php" title="More">More</a>
</body>
<script type="">
function urlCahngeHandle()
{
var hval = location.hash;
var pagehash = hval.split('#');
var page = pagehash[1];
getcontent('includes/'+page);
}
</script>
</html>
The onhashchange event is the best solution to implement the ajax back button. Put all your login.php, map.php and more.php file in the /includes folder.
I hope, this will help those who strugging to implement the back button for the ajax based application.
No comments:
Post a Comment