Results 1 to 8 of 8

Thread: ajaxtabs "rev" only executes on first load

  1. #1
    Join Date
    Aug 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default ajaxtabs "rev" only executes on first load

    Hi I'm working with Ajaxtabs - http://www.dynamicdrive.com/dynamici...jaxtabscontent


    I've linked a .js file into my loading page with the "rev" attribute. It executes great the first time the page loads but not after that.

    The script I am loading is a basic function to hide the link that pulled it in.

    this is it:

    document.getElementById('maintab2').style.display = "none";

    any thoughts? Thanks in advance for help.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,127
    Thanks
    44
    Thanked 3,228 Times in 3,189 Posts
    Blog Entries
    12

    Default

    I'm a little surprised it even works once, and may only be working in some, not all browsers. However, the rev attribute (as used with this script) isn't for executing commands. It is for attaching scripts and/or stylesheets to the page. Once one is attached, it is kept track of and not attached again.

    If you want a certain command to run every time a certain external content is loaded, I would try adding something like so:

    Code:
    <img src="small.gif"
    style="visibility:hidden; position absolute;top:-20px;left-20px;"
    onload="document.getElementById('maintab2').style.display = 'none';">
    to the very bottom of the external page, right before the </body> tag. The image 'small.gif' must exist and be available to the 'top page'. It can be any very small image - say, a 1px by 1px image.
    - John
    ________________________

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

  3. #3
    Join Date
    Aug 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    many many thanks

  4. #4
    Join Date
    Jun 2007
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks John. Thought this might be the answer to my problem posted in:
    http://www.dynamicdrive.com/forums/s...ad.php?t=23874

    However, I am not able to get it to work. The JS that should be loaded everytime is the one to initialize the Animated DIV:
    <script type="text/javascript">var collapse1=new animatedcollapse("owl", 3000, true)</script>

    So, I did:
    <img src="path to image/1by1.gif" style="visibility:hidden; position absolute;top:-20px;left-20px;" onload="var collapse1=new animatedcollapse('owl', 3000, true)">

    But nothing happens, the DIV just remains collapsed.
    Do I need to use: onload="javascript: var collapse1..." instead of
    onload="var collapse1..."

    Would really appreciate any help.
    Thanks

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,127
    Thanks
    44
    Thanked 3,228 Times in 3,189 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by perifluid View Post
    Thanks John. Thought this might be the answer to my problem posted in:
    http://www.dynamicdrive.com/forums/s...ad.php?t=23874

    However, I am not able to get it to work. The JS that should be loaded everytime is the one to initialize the Animated DIV:
    <script type="text/javascript">var collapse1=new animatedcollapse("owl", 3000, true)</script>

    So, I did:
    <img src="path to image/1by1.gif" style="visibility:hidden; position absolute;top:-20px;left-20px;" onload="var collapse1=new animatedcollapse('owl', 3000, true)">

    But nothing happens, the DIV just remains collapsed.
    Do I need to use: onload="javascript: var collapse1..." instead of
    onload="var collapse1..."

    Would really appreciate any help.
    Thanks
    Where is the animatedcollapse() function, the DD's Animated Collapsible DIV script? These must be on the 'top page'. The markup (HTML code) for it, I assume is on the external page and that's fine, but it must be before your 'loading image'.

    This is still no guarantee. If you are still having problems, post a link to the problem pages or a demo of the problem:

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

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

  6. #6
    Join Date
    Jun 2007
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Top Page (calling page) which has the AJAX:
    http://onlychildproject.com/toppageA.htm
    Tab Content 1 Page (called page) which has the Animated DIV:
    http://onlychildproject.com/content2A.htm
    Tab Content 2 Page (called page) which has the animated DIV:
    http://onlychildproject.com/content3A.htm

    As you can see, the Animated DIVs are in separate pages, not in the top page (calling page). The Animated DIVs work well when used separately, but doesn't animate (but remains expanded) when called from the Top page using AJAX. I have tried various tricks, including putting the JS scripts into separate JS files and calling them etc. But nothing works. It only works the first time around when using these roundabout methods.

    *********Top Page (with AJAX) code**********************
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <html><head><script type="text/javascript" src="ajaxtabs/ajaxtabs.js"></script>
    <script type="text/javascript" src="http://onlychildproject.com/animatedcollapse.js"></script></head>
    <body>

    <ul id="ajaxtabber1">
    <li class="selected" id="tab1"><a href="#default" rel="ajaxcontentarea" >Default</a></li>
    <li id="tab2"><a href="http://onlychildproject.com/content2A.htm" rel="ajaxcontentarea">Tab 1 Contents</a></li>
    <li id="tab3"><a href="http://onlychildproject.com/content3A.htm" rel="ajaxcontentarea">Tab 2 Contents</a></li>
    <div id="ajaxcontentarea">This is the default tab content, embedded directly inside the Top page and not called via Ajax</div>
    </ul>

    <script type="text/javascript">startajaxtabs("ajaxtabber1")</script>
    </body></html>

    *********one of the Called Pages*****************
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <html><head><script type="text/javascript" src="http://onlychildproject.com/animatedcollapse.js"></script></head>
    <body>

    <p>Initial content for Tab2 Here</p>
    <p>Well, this sketch is a study of the heads of Hark- away and Columbine, made before the picture was begun.</p>

    <a href="javascript:collapse1.slidedown()">Slide Down</a> || <a href="javascript:collapse1.slideup()">Slide Up</a>

    <div>
    <div id="c1">
    This is the Extra Content---------
    The Parts contain 56 royal pages ; from Eight to
    Twelve Illustrations, and either a Coloured Plate or a Full-
    page Illustration on plate paper.
    </div>
    </div>
    <img src="http://onlychildproject.com/images/1by1.gif" style="visibility:hidden; position absolute;top:-20px;left-20px;" onload="javascript:var collapse1=new animatedcollapse('c1', 500, false)">
    <script type="text/javascript">var collapse1=new animatedcollapse("c1", 1000, false)</script>
    </body></html>

    Please let me know if I need to provide any other information.
    Thanks

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,127
    Thanks
    44
    Thanked 3,228 Times in 3,189 Posts
    Blog Entries
    12

    Default

    OK, I got it to work, but it is a little bit complicated, especially if you also want the individual content2A and content3A pages to work on their own.

    First off, you need a different Animated Collapsible DIV script for the top page. Where it has:

    Code:
    animatedcollapse.dotask(window, function(){thisobj._getheight(persistexpand)}, "load")
    replace it with:

    Code:
    setTimeout(function(){thisobj._getheight(persistexpand)}, 300)
    This new script should only be attached/linked to, or on the top page. And the original one should only be attached/linked to, or on the content pages.

    Next, on the top page, where you have this:

    Code:
    <script type="text/javascript">startajaxtabs("ajaxtabber1")</script>
    Make it look like so:

    Code:
    <script type="text/javascript">
    startajaxtabs("ajaxtabber1");
    var collapse1;
    var collapse2;
    </script>
    Now, there were a few just normal errors on your content pages, so rather than try to explain all that and the new code required, I will just paste in the proper code for both of these pages:

    content2A.htm
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <html><head><script type="text/javascript" src="http://onlychildproject.com/animatedcollapse.js"></script></head>
    <body>
    
    <p>Initial content for Tab2 Here</p>
    <p>Well, this sketch is a study of the heads of Hark- away and Columbine, made 
    before the picture was begun. The horse was old when I married your papa : he 
    was past work, and used to live quite an idle He passed his days out in the 
    large field, and at night was put into a comfortable shed with plenty of nice 
    warm straw. </p>
    
    <a href="javascript:collapse1.slidedown()">Slide Down</a> || <a href="javascript:collapse1.slideup()">Slide Up</a>
    
    <div>
    	<div id="c1">
    		*** This is the Extra Content *****
    		The Parts contain 56 royal pages ; from Eight to 
    		Twelve Illustrations, and either a Coloured Plate or a Full- 
    		page Illustration on plate paper. Each month several Prizes 
    		are offered for the Solution of Puzzles ; Ten Guinea and Ten 
    		Half -Guinea Prizes for Essays, Stories, Poems, Maps, 
    		Models, Paintings. All the Stories are Completed 
    		in the Volume in which they commence. Articles on 
    		subjects interesting to Boys, written by the most popular 
    		living Authors, appear each month. 
    	</div>
    </div>
    <img src="http://onlychildproject.com/images/1by1.gif" style="visibility:hidden; position:absolute;top:-20px;left:-20px;" onload="if(location.href.indexOf('content2A')<0){collapse1=new animatedcollapse('c1', 500, false)}">
    <script type="text/javascript">var collapse2=new animatedcollapse("c1", 500, false)</script>
    </body></html>
    content3A.htm
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <html><head><script type="text/javascript" src="http://onlychildproject.com/animatedcollapse.js"></script></head>
    
    <body>
    <p>Initial content for Tab3 Here</p>
    <p>Here we have a pleasant sociable tea-party. 
    These little people are Rosy and Maude Drum- mond, but they call themselves just now Mrs. Jones and Mrs. Smith. They meet at tea at Miss 
    Penelope Prim's ; that lady being the big doll, 
    seated on the easy chair in the middle. 
    </p>
    
    <p><a href="javascript:collapse2.slideit()">Click Here for More</a></p>
    <div>
    	<div id="c2">
    		*** This is the Extra Content for Tab3*****
    		Really, Mrs. Tabbyskin, you do not improve 
    		upon more intimate acquaintance. Although you 
    		are now attacking one of your own size and kind, 
    		which is better than killing a dear little bird, still 
    		you look so ugly and vicious, with your glaring 
    		eyes, flattened ears, and open mouth, that I for one 
    		could never pet you again. The pretty white 
    		cat does not look half so savage. Good-bye, Mrs. 
    		Tabbyskin, and we don't want to see you again. 
    	</div>
    </div>
    <img src="http://onlychildproject.com/images/1by1.gif" style="visibility:hidden; position:absolute;top:-20px;left:-20px;" onload="if(location.href.indexOf('content3A')<0){collapse2=new animatedcollapse('c2', 1500, true)}">
    <script type="text/javascript">var collapse2=new animatedcollapse("c2", 1500, true)</script>
    </body></html>
    Hopefully, this will give you all that you need to go from here.
    - John
    ________________________

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

  8. #8
    Join Date
    Jun 2007
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks very much John. This works well now.
    Having the two scripts (AJAX Tabs and Animated DIV) work together is a big deal. It doesn't just add the strength of both their functionalities- it actually multiplies them. The Animated DIV goes very well with the AJAX tabs- like gourmet food )
    Appreciate the quick help! This in a way is the cherry on the ice-cream for my website!
    Tested and works on IE6, FF and Opera.

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
  •