Ajax dynamic tabbed content script

[jackrabbithanna]

I'm using a ajax script the uses a tabbed div that fetches a remote webpage to display for each tab.when clicked. the script works fine except for one thing. The content of the page i want to display is a javascript image gallery. i am trying to do multiple galleries on one page.
When the page loads the default tab loads the gallery correctly. But when I click on the next tab the javascript gallery fails. The script is exactly the same for each page but I've changed the number of images. I know the ajax script is working because the html part of the page displays correctly.
I need to reset the javascript state so that each time i click on the tab the script is loaded fresh so that there is no variable conflict. Each time a tab is clicked it needs to have a blank javascript state.

Is there an ajax method to clear the javascript cache or state or memory or whatever the correct name is???

Thanks is advance any help would be appreciated.

[acoder]

Welcome to TSDN!

To refresh the Javascript state, unload and reload the page.

You could use iframes to keep everything separate or just make all variable names unique. Perhaps you could use objects.

[JamieHowarth0]

Hi jack,

Are you using IE7? There's a flaw in IE7 regarding XMLHTTP objects that means even if you are using the XMLHTTP ActiveX object in IE7, you have to recreate the object as every time it is used it is destroyed and has to be re-created on-demand.

The best way I've found of bypassing this problem is by setting up a function whereby if my user is using any variant of IE then I manually destroy and re-create the AJAX object every time they click on the page body:

function createAJAXObjs {
if ((navigator.appName.indexOf("Microsoft") > -1) && navigator.appVersion.indexOf("7") > -1)) {
   if (myXmlHTTPObj != null) {
       myXmlHTTPObj.close;
   }
myXmlHTTPObj = new XmlHTTPRequest;
}
}
 

If it's ASP.NET AJAX that you're using then unfortunately I can't help.

medicineworker

[jackrabbithanna]

No I'm not using IE. Here's the code::
The ;javascripts that are loaded using rev= are virtually the same except for the values for captions and number of variables......any examples on using objects?? how do I manually reload the page each time a user clicks on a tab.. I would rather not do that......using objects would seem better.....I"m a newbie to Ajax mainly just use javascript.


[HTML]<ul id="maintab" class="shadetabs" >
<li class="selected"><a href="resgallery.html" rel="ajaxcontentarea" rev="gallery.css, resgallery.js">Residential Pools</a></li>
<li><a href="vrgallery.html" rel="ajaxcontentarea" rev="gallery.css, vrgallery.js">Valley Ranch</a></li>
</ul>
</td>
</tr>
</table>
<div id="ajaxcontentarea" class="contentstyle">

</div>
<script type="text/javascript">
//Start Ajax tabs script for UL with id="maintab" Separate multiple ids each with a comma.
startajaxtabs("maintab")
</script>[/HTML]

[jackrabbithanna]

I just got this ajax script free off the internet.....Do I need to edit the script ajaxtabs and figure out how to use objects or manually reload the page.....ok I guess I'll have to learn some ajax.......is there any other way to reset the javascript state other than reloading the page??? Is there not an ajax command to reset it?

[jackrabbithanna]

So if I used an iframe instead of a div then i wouldn't have this problem?

[jackrabbithanna]

Here's the ajax script: anywhere in there where I can reset the javascript state for each click on a tab? The function loadobjs does the loading of the javascript files.

var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadstatustext="<img src='ajaxtabs/loading.gif' /> Requesting content..."
var enabletabpersistence=0 //enable tab persistence via session only cookies, so selected tab is remembered (1=yes, 0=no)?
 
////NO NEED TO EDIT BELOW////////////////////////
var loadedobjects=""
var defaultcontentarray=new Object()
var bustcacheparameter=""
 
function ajaxpage(url, containerid, targetobj){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, IE7, 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
var ullist=targetobj.parentNode.parentNode.getElementsByTagName("li")
for (var i=0; i<ullist.length; i++)
ullist[i].className=""  //deselect all tabs
targetobj.parentNode.className="selected"  //highlight currently clicked on tab
if (url.indexOf("#default")!=-1){ //if simply show default content within container (verus fetch it via ajax)
document.getElementById(containerid).innerHTML=defaultcontentarray[containerid]
return
}
document.getElementById(containerid).innerHTML=loadstatustext
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(revattribute){
if (revattribute!=null && revattribute!=""){ //if "rev" attribute is defined (load external .js or .css files)
var objectlist=revattribute.split(/\s*,\s*/) //split the files and store as array
for (var i=0; i<objectlist.length; i++){
var file=objectlist[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 expandtab(tabcontentid, tabnumber){ //interface for selecting a tab (plus expand corresponding content)
var thetab=document.getElementById(tabcontentid).getElementsByTagName("a")[tabnumber]
if (thetab.getAttribute("rel")){
ajaxpage(thetab.getAttribute("href"), thetab.getAttribute("rel"), thetab)
loadobjs(thetab.getAttribute("rev"))
}
}
 
function savedefaultcontent(contentid){// save default ajax tab content
if (typeof defaultcontentarray[contentid]=="undefined") //if default content hasn't already been saved
defaultcontentarray[contentid]=document.getElementById(contentid).innerHTML
}
 
function startajaxtabs(){
for (var i=0; i<arguments.length; i++){ //loop through passed UL ids
var ulobj=document.getElementById(arguments[i])
var ulist=ulobj.getElementsByTagName("li") //array containing the LI elements within UL
var persisttabindex=(enabletabpersistence==1)? parseInt(getCookie(arguments[i])) : "" //get index of persisted tab (if applicable)
var isvalidpersist=(persisttabindex<ulist.length)? true : false //check if persisted tab index falls within range of defined tabs
for (var x=0; x<ulist.length; x++){ //loop through each LI element
var ulistlink=ulist[x].getElementsByTagName("a")[0]
ulistlink.index=x
if (ulistlink.getAttribute("rel")){
var modifiedurl=ulistlink.getAttribute("href").replace(/^http:\/\/[^\/]+\//i, "http://"+window.location.hostname+"/")
ulistlink.setAttribute("href", modifiedurl) //replace URL's root domain with dynamic root domain, for ajax security sake
savedefaultcontent(ulistlink.getAttribute("rel")) //save default ajax tab content
ulistlink.onclick=function(){
ajaxpage(this.getAttribute("href"), this.getAttribute("rel"), this)
loadobjs(this.getAttribute("rev"))
saveselectedtabindex(this.parentNode.parentNode.id, this.index)
return false
}
if ((enabletabpersistence==1 && persisttabindex<ulist.length && x==persisttabindex) || (enabletabpersistence==0 && ulist[x].className=="selected")){
ajaxpage(ulistlink.getAttribute("href"), ulistlink.getAttribute("rel"), ulistlink) //auto load currenly selected tab content
loadobjs(ulistlink.getAttribute("rev")) //auto load any accompanying .js and .css files
}
}
}
}
}
 
////////////Persistence related functions//////////////////////////
 
function saveselectedtabindex(ulid, index){ //remember currently selected tab (based on order relative to other tabs)
if (enabletabpersistence==1) //if persistence feature turned on
setCookie(ulid, index)
}
 
function getCookie(Name){ 
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return ""
}
 
function setCookie(name, value){
document.cookie = name+"="+value //cookie value is domain wide (path=/)
}

[jackrabbithanna]

Basically I need to know can you use a script to dynamically switch pages that use the same javascript but with different values to the same variable names???

I'm not exactly familiar with the terminology for ajax/javascript but In c++ i would create an object of type class for each page containing dynamic content.

How to have dynamic content nested in dynamic content. I think I am missing a couple of pieces of the puzzle in my understanding of the object model in ajax/javascript.


The script loads the default page, with the with the javascript gallery, in the ajax-controlled DIV no problem. But even with one item, when I click on the tab it loads the correct tab/page but the javascript no longer functions at all. The html in the div displays correctly. There's only one tab/page ever loaded by ajax and it is the default one. When the user tries to click a tab ajaxtabs script will not load the javascript part of the page. i use a REL property to include the seperate javascript file.

[acoder]

Can you show the code for one of the scripts that you are using?