Ajaxed tabs

[Narfix]

Hello !

I've been using with the script of the dymanic tab contents http://www.dynamicdrive.com/dynamici...axtabscontent/

Each of my tabs have their own js with tons of scripts in it.
I've modified the script to suit my needs so that it unloads every loaded script whenever I change tabs.
This works just nice so far.

But... in each of the js, there's a startup function that initialize various contents.
Thing is the first time you enter in the tab, it works perfect. But if you leave the tab, then come back again, the init function is not called anymore.

I call the init function with a call outside of any other functions.

Any idea ?

Thx !

[jscheuer1]

The way ajaxtabs works is to incorporate the code from the body of the external page into the 'top' page. It becomes then, just one page. If your script is included there, or ready to be used in some other fashion, just run it after the content from the external page is loaded into the 'top' page.

One way would be to add a poll function testing for an element that will be loaded with the external content to the link that adds that content, when that element exists have the polling function exit and run the function from your script appropriate to the added content.

[ddadmin]

John is right, any included .js/.css files is only done once, the first time you click on the tab. Otherwise, if the user clicks on the tab multiple times, you're essentially adding multiple copies of these external files to your page, which can bog things down.

If you want to temporarily disable this behavior so the external files are added everytime, locate the line:

loadedobjects+=file+" " //Remember this object as being already added to page

inside ajaxtabs.js, and change it to:

loadedobjects="" //Remember this object as being already added to page

[Narfix]

This is how I do it.
curjs is used to keep track of which js I included last.
When I load a new tab, I remove the script from the head and load the new one but it will only execute the first time.
The code is included in the top page, not in the ones I load afterwards.

function loadobjs(file){
 if (!document.getElementById) return;
 var fileref="";
	 
 if (file.indexOf(".js")!=-1) {
  fileref=document.createElement('script');
  fileref.setAttribute("type","text/javascript");
  fileref.setAttribute("src", file);
  fileref.setAttribute("id","curjs");

  var old = document.getElementById('curjs');
  if (old) {document.getElementsByTagName("head").item(0).removeChild(old);}

//	alert(file + ' added.');
  document.getElementsByTagName("head").item(0).appendChild(fileref);
 }
}

[jscheuer1]

Is this your solution or just more explanation of the problem?

I just tested your updated loadobjs() function and it works fine with a simple external script that runs an alert. So, either it is your solution, or the problem is likely with your external script. If you are still having problems, we would need to see a demo page:

Please post a link to the page on your site that contains the problematic script so we can check it out.

Or at the very least, your external script.

[Narfix]

sorry for the late reply.. long weekend

I cannot post a link to the website since it's not publically available.. sorry

on top of each asp page I load, I've put :

<%
response.expires = 0
response.expiresabsolute = Now() - 1
response.addHeader "pragma","no-cache"
response.addHeader "cache-control","private"
response.ContentType="text/html"
response.Charset="ISO-8859-1"
%>

but that only only applies on the asp page I presume.

my jscript are built the following :

var agmCiv;
var agmNom;
var agmNomJF;
var agmPnom;
var agmPic;
var agmEmail;
var agmLogin;
var agmOrg;
var agmMat;
var agmFic;
var agmSup;

function cacheDOM() {
 alert('Start caching');
 agmNom = de('txtNom');
 agmNomJF = de('txtNomJF');
 agmPnom = de('txtPre');
 agmPic = de('txtPic');
 agmEmail = de('txtEml');
 agmLogin = de('txtLog');
 agmOrg = de('txtOrg');
 agmMat = de('txtMat');
 alert('Done caching');

}

function node(x,n,d) { 
 if(x.item(n).childNodes.item(0)!=null) {
   return x.item(n).childNodes.item(0).nodeValue;
 } else {
   return d;
 }
}

function agmDisplayAgent() {
  if(http.readyState == 4) {
	  if(http.responseText.substr(0,1) == "<") {	
      var oXML = http.responseXML;
			var oRoot = oXML.documentElement.childNodes.item(0).childNodes;
			alert(node(oRoot, 0));
      agmNom.value = node(oRoot,1);
	  	throbber(false);
    }
	}	
}

function jsinit() {
//  correctPNG();
 alert('jsinit');
 cacheDOM();	
 url = "/ag/ag.asp?p=2&uti=" + Uti();
  http.open('GET', url, true);
 	http.onreadystatechange = agmDisplayAgent;	
  throbber(true);
  http.send(null);
}

jsinit();

On the first load of the page, I get the 3 alerts on the cacheDom function and in the jsinit. When I exit it and come back, I don't have any of them anymore.
Some of the functions there are declared in the top js.

[jscheuer1]

OK, I had to rewrite your script a bit because it either is incomplete or relies on other loaded code that you did not supply, I changed it to this:

function de(txt){
return txt
}

var agmCiv;
var agmNom;
var agmNomJF;
var agmPnom;
var agmPic;
var agmEmail;
var agmLogin;
var agmOrg;
var agmMat;
var agmFic;
var agmSup;

function cacheDOM() {
 alert('Start caching');
 agmNom = de('txtNom');
 agmNomJF = de('txtNomJF');
 agmPnom = de('txtPre');
 agmPic = de('txtPic');
 agmEmail = de('txtEml');
 agmLogin = de('txtLog');
 agmOrg = de('txtOrg');
 agmMat = de('txtMat');
 alert('Done caching');

}

function node(x,n,d) { 
 if(x.item(n).childNodes.item(0)!=null) {
   return x.item(n).childNodes.item(0).nodeValue;
 } else {
   return d;
 }
}

function agmDisplayAgent() {
  if(http.readyState == 4) {
  if(http.responseText.substr(0,1) == "<") {
      var oXML = http.responseXML;
var oRoot = oXML.documentElement.childNodes.item(0).childNodes;
alert(node(oRoot, 0));
      agmNom.value = node(oRoot,1);
  throbber(false);
    }
}
}

function jsinit() {
//  correctPNG();
 alert('jsinit');
 cacheDOM();
/* url = "/ag/ag.asp?p=2&uti=" + Uti();
  http.open('GET', url, true);
 http.onreadystatechange = agmDisplayAgent;
  throbber(true);
  http.send(null);*/
}

jsinit();

I also, tried out your 'solution' from the previous post some more and it produced errors in FF and wouldn't work at all there, even though it still worked in IE for the simple alert as mentioned before. This seemed to indicate a problem with it. So, I got rid of it and wrote this updated loadobjs() function (additions red):

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&&file.indexOf(".js")!=-1){
var scripts=document.getElementsByTagName('script')
for (var i_tem = 0; i_tem < scripts.length; i_tem++)
if (scripts[i_tem].src==file)
scripts[i_tem].parentNode.removeChild(scripts[i_tem])
var re=file+' '
loadedobjects=loadedobjects.replace(re, '')
}
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
}
}
}
}

Basically, this will remove any previously loaded script and reload it at the time it is requested, as if it had never been loaded. Except, of course, if it had altered any global variables the other time(s) it ran, those may still be in the state it left them in.

Using your method, I was having the same problem you were, with the above version, all three alerts fired each time. If you are still having problems, it is because your external script has errors. I'd use FF's javascript console to track them down, its output is much clearer (usually) than IE's error messages.

[Narfix]

Oh my !! It works like a charm now !!
Thanks a lot for your help !


By the way it wasn't a solution, just what I was using. I don't need the load any css just a jscript.

[Narfix]

Just a little info for anybody who read this thread and using the original script or a modified one.

If you execute something at the jscript load, you shall not load your jscript at the same time you send your request as in the originals script. You have to wait for the page to complete loading before loading the jscript.

I had numerous errors with unknown objects.
The script was already trying to run things but the page just wasn't there yet.

To make it clearer, you should load the script in the loadpage. The somewhat code :

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
loadobj(objtobeloaded);
}

[jscheuer1]

That's right, Narfix. As I originaly stated:

One way would be to add a poll function testing for an element that will be loaded with the external content to the link that adds that content, when that element exists have the polling function exit and run the function from your script appropriate to the added content.

With that approach, the script only needs to be loaded once and could even be hard coded (without its 'run command', jsinit() in your example, being executed) onto the 'top' page. An example of a poll is:

function pollContent(){
if (!document.getElementById)
return;
if (document.getElementById('someID'))
jsinit();
else
setTimeout("pollContent()",200)
}

where jsinit() is the function you want to run and someID is the unique id of some element in the loading content, best near the end of the loading content. This could be run at the same time you run ajaxpage or ajaxtabs or whatever ajax content loading script one is using, ex using ajaxtabs:

<a href="external.htm" rel="contentarea" onclick="pollContent();return true;">DHTML</a>