Link to new page, with new content.

[lbvaughan]

I am setting up a site, and using AJAX to change out the existing content of a page with new content to reduce clutter in coding and the overall size of the site.  I dont want to run the entire site off of a single base page with multiple content pages, but would prefer to have multiple base pages each with thier own set of content pages.

So far, this has worked well, however now I am coming to an issue when I want to link from one base page, to another base page, but load different content on the new base page than the default.

Example.

[table][tr][td]Page A)[/td][td][/td][td]Page B)[/td][/tr][tr][td]Content 1.[/td][td][/td][td]Content 3[/td][/tr][tr][td]Content 2.[/td][td][/td][td]Content 4[/td][/tr][/table]

Normally Page A, will load with Content 1.  However what I want to be able to do is, click a link from Page B - Content 3, and have it Load Page A with Content 2 instead of Content 1.

Here is the code im using.

[code]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
}
}
}[/code]

Normally I would use the following style link to bring up new content and i have an Onload in the body of the page to load content 1.

<a href="javascript:ajaxpage('test.htm', 'contentarea');">test</a>
<div id="contentarea"></div>

Any help would be greatly appreciated.

[lbvaughan]

Solved, thx.