asked on

Where is my javascript error?

Experts,

I am using the following AJAX tabs script: http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/index.htm

I am nesting tabs using the script. When I nest my tabs, I am getting the error as seen in the screen shot below. The error does not occur if I am not nesting my tabs. Can anyone help me diagnose my problem?

Here is my nested tabs code:

echo '<div class="controllers_message">';
echo '
<ul id="countrytabs" class="shadetabs">
<b>Admin Panel</b> > 
<li><a href="admin_routines.php?cmd=users" rel="countrycontainer">Users</a></li>
<li><a href="admin_routines.php?cmd=reports" rel="countrycontainer">Reports</a></li>
<li><a href="admin_routines.php?cmd=database" rel="countrycontainer">Database</a></li>
<li><a href="admin_routines.php?cmd=greeting" rel="countrycontainer">Greeting</a></li>
<li><a href="admin_routines.php?cmd=stats" rel="countrycontainer">Site Stats</a></li>
</ul>';

echo'
<div id="countrydivcontainer" style="border-top:1px solid gray; padding: 5px; margin-bottom:0px;">';
echo'</div>';

echo '
<script type="text/javascript">
	var countries=new ddajaxtabs("countrytabs", "countrydivcontainer")
	countries.setpersist(true)
	countries.setselectedClassTarget("link") //"link" or "linkparent"
	countries.init()
			
		countries.onajaxpageload=function(pageurl){
			
			if (pageurl.indexOf("admin_routines.php?cmd=users")!=-1){
			var user=new ddajaxtabs("usertabs", "userdivcontainer")
			user.setpersist(true)
			user.setselectedClassTarget("link") //"link" or "linkparent"
			user.init()
			}
																	
			if (pageurl.indexOf("admin_routines.php?cmd=reports")!=-2){
			var report=new ddajaxtabs("reporttabs", "reportdivcontainer")
			report.setpersist(true)
			report.setselectedClassTarget("link") //"link" or "linkparent"
			report.init()
			}
			
			if (pageurl.indexOf("admin_routines.php?cmd=database")!=-3){
			var database=new ddajaxtabs("databasetabs", "databasedivcontainer")
			database.setpersist(true)
			database.setselectedClassTarget("link") //"link" or "linkparent"
			database.init()
			}
			
		}	
									
</script>
';
echo '</div>';

Open in new window

Untitled-1.jpg

moosely123

as the error refers to not being able to find a element on a page, it could be that you have have tab names wrong maybe? so are the tabs names correct in the follow snipets of code

var countries=new ddajaxtabs("countrytabs", "countrydivcontainer")
var user=new ddajaxtabs("usertabs", "userdivcontainer")
var report=new ddajaxtabs("reporttabs", "reportdivcontainer")
var database=new ddajaxtabs("databasetabs", "databasedivcontainer")

evibesmusic

ASKER

@moosely123:

After my last post, I updated the script above to the following code and was able to elliminate two instances of the error message. I now only get the error when I click on the 'Database' tab. If I click on the 'Users' and 'Reports' tab, no error message appears.

I simply made the if statements into 'else if' statments. Any thoughts now? Maybe my naming conventions of the third tab?

Thanks for your help.

echo ' 
<script type="text/javascript"> 
        var countries=new ddajaxtabs("countrytabs", "countrydivcontainer") 
        countries.setpersist(true) 
        countries.setselectedClassTarget("link") //"link" or "linkparent" 
        countries.init() 
                         
                countries.onajaxpageload=function(pageurl){ 
                         
                        if (pageurl.indexOf("admin_routines.php?cmd=users")!=-1){ 
                        var user=new ddajaxtabs("usertabs", "userdivcontainer") 
                        user.setpersist(true) 
                        user.setselectedClassTarget("link") //"link" or "linkparent" 
                        user.init() 
                        } 
                                                                                                                                         
                        else if (pageurl.indexOf("admin_routines.php?cmd=reports")!=-2){ 
                        var report=new ddajaxtabs("reporttabs", "reportdivcontainer") 
                        report.setpersist(true) 
                        report.setselectedClassTarget("link") //"link" or "linkparent" 
                        report.init() 
                        } 
                         
                        else if (pageurl.indexOf("admin_routines.php?cmd=database")!=-3){ 
                        var database=new ddajaxtabs("databasetabs", "databasedivcontainer") 
                        database.setpersist(true) 
                        database.setselectedClassTarget("link") //"link" or "linkparent" 
                        database.init() 
                        } 
                         
                }        
                                                                         
</script> 
';

Open in new window

Dave Baldwin

It looks to me like the definition of 'nested tabs' on Dynamic Drive isn't what you are doing. They refer to other pages loaded with their own tabs, not tabs nested on the same page.

evibesmusic

ASKER

@DaveBaldwin:

Please see this link for clarification:
http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/ajaxtabs_suppliment2.htm

Cheers!

ASKER CERTIFIED SOLUTION

evibesmusic

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Dave Baldwin

Ok, I've read that. The only thing I can see that might be wrong is that all 3 "if" statements should have "!=-1" instead of "!=-2" or "!=-3". "-1" is the error return for the 'indexOf' not being found according to this page http://www.w3schools.com/jsref/jsref_indexOf.asp.

enggagrawal

after eash javascript statement there should be delimiter
echo '<script type="text/javascript">';
echo ' var countries=new ddajaxtabs("countrytabs", "countrydivcontainer");';
echo 'countries.setpersist(true);';
echo 'countries.setselectedClassTarget("link") //"link" or "linkparent";';
----
----

echo '</script>';