Ajax Div Layer change with Cookie support

Update a Div layer, utilise the browser back buttton

[Kappatango]

Hi,

First post....anyway down to business

I have created a site which the user navigates completely from the index, with ajax controlling menu links to update in the maincontent div.

This allows the menu to drive the content in the div layer with fast loading times and no full page refresh.

Currently, the user can navigate the site, but not use the Back button as the "Page" does not reload.

Is there a way I can set a cookie to remember page content each time a menu link is clicked?

Here is the menu code for one button as is:

<td width="90"><div align="center"><a href="javascript:ajaxpage('Home.html', 'mainContent');" target="_top" onclick="MM_nbGroup('down','group1','Start','Images/newsite/buttonimages/startover3.jpg',1);urchinTracker('/Home.html');" onmouseover="MM_nbGroup('over','Start','Images/newsite/buttonimages/startover3.jpg','',1);" onmouseout="MM_nbGroup('out')"><img src="Images/newsite/buttonimages/startover3.jpg" alt="" name="Start" border="0" id="Start" onload="MM_nbGroup('init','group1','Start','Images/newsite/buttonimages/start3.jpg',1)" /></a></div></td>

For reference, the Ajax code I use is from Dynamic drive:

<script type="text/javascript">
/***********************************************
* Dynamic Ajax Content- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
***********************************************/

var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""

function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 ¦¦ window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}

function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_nbGroup(event, grpName) { //v6.0
var i,img,nbArr,args=MM_nbGroup.arguments;
if (event == "init" && args.length > 2) {
if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
nbArr[nbArr.length] = img;
for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = args[i+1];
nbArr[nbArr.length] = img;
} }
} else if (event == "over") {
document.MM_nbOver = nbArr = new Array();
for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
nbArr[nbArr.length] = img;
}
} else if (event == "out" ) {
for (i=0; i < document.MM_nbOver.length; i++) {
img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
} else if (event == "down") {
nbArr = document[grpName];
if (nbArr)
for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
document[grpName] = nbArr = new Array();
for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
nbArr[nbArr.length] = img;
} }
}
</script>

I am hoping to add an onclick Java event to update the cookie, so the user can use the back button.... is this possible?

Sorry for the wall of code, I didn't know how much to include. I am not a code genius, but can understand if explained.

Thanks

Karl

[edited by: jatar_k at 11:42 am (utc) on May 19, 2008]
[edit reason] no urls thanks [/edit]

[daveVk]

If I understand correct, your sites consists of 1 URL ( 1 page ) as far as the browser history and search engines are concerned, there is only 1 url to bookmark and for others to link to your site.

I would not go this way unless there is a compelling reason.

As far as I can see there is no history to go back to. Yes you could use a cookie to keep a history of your ajax calls and provide your own back button of sorts, but much better not to break it in first place.

Welcome to the forum.

[Kappatango]

Hi Dave,

Thanks for the reply. Your understanding is correct. I went down this route as I like the clean transition between pages, where only the content section changes.

I know that a PHP framework will allow me to define the .location. and content, but the whole page will still reload.

My understandin of cookies was that if a cookie is added/updated then the BROWSER back button would function...

That may be my lack of knowledge.....

I think I might be re-working this into a php framework then, to allow the url to be linked/recorded.

@ jatar_k: Sorry, my bad for the link....