ajaxtabs "rev" only executes on first load

**jez777** · 08-20-2007, 11:12 AM

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.

**jscheuer1** · 08-20-2007, 02:58 PM

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.

**jez777** · 08-21-2007, 02:43 AM

many many thanks

**perifluid** · 08-21-2007, 06:16 PM

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

**jscheuer1** · 08-21-2007, 06:31 PM

Originally Posted by perifluid

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.

**perifluid** · 08-22-2007, 01:01 PM

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

**jscheuer1** · 08-22-2007, 02:25 PM

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.

**perifluid** · 08-22-2007, 04:41 PM

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.

Thread: ajaxtabs "rev" only executes on first load

Thread Tools

Search Thread

ajaxtabs "rev" only executes on first load

Bookmarks

Bookmarks

Posting Permissions