Javascript not working when put in external file - need help!:o)

[happyavocado]

1) Script Title: Tab Content Script

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/index.htm

Demo #1 Basic implementation

3) Describe problem:

I've got this javascript working well on a test page - it basically uses ajax to call external pages and insert them into a named div when a link is selected.

My problem is that the instructions say to put the following javascript code in the html to call the javascript into action. I don't want the javascript in my html and instead have tried putting it in an external js file. Only thing is that when I do this the javascript effect of pulling external pages as described above, stops working and I have no idea why.

Here is the script that I have put in an external js file (please note: the bits in bold are the bits that I did not put in my js file:

<script type="text/javascript">
var countries=new ddajaxtabs("tabs", "maincontent")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()
</script>

My path to my js file is all correct in my head section.

Really baffled! Any help much appreciated!

Many thanks in advance,

Rachael

[rangana]

Remove highlighted:


<script type="text/javascript">
var countries=new ddajaxtabs("tabs", "maincontent")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()
</script>


If nothing works, please provide a link to the page in question.

[happyavocado]

Hi there

Thanks for your reply. The bits you highlighted (and that I put in bold in my original email) were not put into my js file.

The link is www.compare4kids.co.uk/testing.php

The links on the lefthand side, under where it says "sort by price" etc, are the ones in question. The top link is the default one, mostof the other links are linked to non-existant pages, so when this is working properly it just brings up the "requestin content" gif.

Hope this helps!
Thanks again for any help.

[rangana]

Try to move this part:


<script type="text/javascript" src="js/navi.js"></script>


...just after your tabs ul markup:


<ul id="tabs" class="shadetabs">
<li><a class="selected" rel="#default" href="#">Show All (34) </a> </li>
<br /><span class="stylesubhead">Sort by Price:</span>
<li><a rel="maincontent, nofollow" href="kids/bedpricea.htm">&pound;0-&pound;99 (12) </a></li>
<li><a rel="maincontent" href="kids/bedspriceb.htm">&pound;100-&pound;250 (11) </a></li>
<li><a rel="maincontent" href="kids/bedspricec.htm">&pound;251+ (3) </a></li>
<br /><br />
<span class="stylesubhead">Sort by Colour:</span>
<li><a rel="maincontent" href="kids/bedswhite.htm">White (10) </a></li>
<li><a rel="maincontent" href="kids/bedswood.htm">Natural wood (9) </a></li>
<li><a rel="maincontent" href="kids/bedspink.htm">Pink (6) </a></li>
<li><a rel="maincontent" href="kids/bedsblue.htm">Blue (4) </a></li>
<li><a rel="maincontent" href="kids/bedsblack.htm">Black (1) </a></li>
</ul>
<script type="text/javascript" src="js/navi.js"></script>


...this is to ensure that your markup has already loaded before the script executes.

[happyavocado]

That's worked, thank you very much!

just one more question - I've taken the javascript out as i know the search engines have a hard time reading it - will they be okay reading this snippet halfway through my html? The actual javascript is in the external file so preusming it is okay?