Page 1 of 3 123 LastLast
Results 1 to 10 of 23

Thread: Ajaxed tabs

  1. #1
    Join Date
    May 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Ajaxed tabs

    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 !
    Last edited by Narfix; 05-23-2006 at 11:47 AM.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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:

    Code:
    loadedobjects+=file+" " //Remember this object as being already added to page
    inside ajaxtabs.js, and change it to:

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

  4. #4
    Join Date
    May 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

    Code:
    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);
     }
    }

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    May 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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 :

    Code:
    <%
    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 :
    Code:
    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.

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    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):

    Code:
    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    May 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    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.

  9. #9
    Join Date
    May 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Lightbulb

    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 :

    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);
    }

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    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:

    HTML Code:
    <a href="external.htm" rel="contentarea" onclick="pollContent();return true;">DHTML</a>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •