Results 1 to 3 of 3

Thread: Need help with nested ajax tabs Please

  1. #1
    Join Date
    Nov 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Need help with nested ajax tabs Please

    1) Script Title: Ajax Tabs Content script

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

    3) Describe problem: Ok I have 5 main tabs and I need a nested tab on everyone. the first nested tab works fine, but when I add a second nested tad on on the second tab, it dosent work right, when yoy click the tab it takes you to a seperate page instead on showing it in the div section of the nested tab.
    ---here is the first page---
    <ul id="countrytabs" class="shadetabs">
    <li><a href="ajax_ext/externalnested.asp" rel="countrycontainer">Residential</a></li>
    <li><a href="ajax_ext/externalnested2.asp" rel="countrycontainer">Business</a></li>
    <li><a href="ajax_ext/externalnested3.asp" rel="countrycontainer">Customer Service</a></li>
    <li><a href="ajax_ext/externalnested4.asp" rel="countrycontainer">Networking</a></li>
    <li><a href="ajax_ext/externalnested5.asp" rel="countrycontainer">Creative Services</a></li>
    </ul>

    <!--<a href="#" rel="#default" class="selected"__#iframe-->
    <div id="countrydivcontainer" style="border:1px solid gray; width:100%; margin-bottom: 1em; padding: 50px">
    <p>This is some default tab content, embedded directly inside this space and not via Ajax. It can be shown when no tabs are automatically selected, or associated with a certain tab, in this case, the first tab.</p>
    </div>

    <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("externalnested.asp")!=-1){
    var res=new ddajaxtabs("restabs", "resdivcontainer")
    res.setpersist(true)
    res.setselectedClassTarget("link") //"link" or "linkparent"res.init()

    }

    }
    </script>


    ---here is the first nested tab that is working----

    <ul id="restabs" class="shadetabs">
    <li><a href="ajax_ext/external_tel_res.asp" rel="rescontainer">Telephone</a></li>
    <li><a href="ajax_ext/external_dsl.asp" rel="rescontainer">DSL Internet</a></li>
    <li><a href="ajax_ext/external_dialup.asp" rel="rescontainer">Dial-up Internet</a></li>
    <li><a href="ajax_ext/external_wireless.asp" rel="rescontainer">Wireless</a></li>
    <li><a href="ajax_ext/external_support.asp" rel="rescontainer">24/7 Support</a></li>
    </ul>
    <!--<a href="#" rel="#default" class="selected"-->
    <div id="resdivcontainer" style="border:1px solid gray; width:100%; margin-bottom: 1em; padding: 10px">
    <p>external nested page</p>
    </div>

    <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("externalnested.asp")!=-1){
    var res=new ddajaxtabs("restabs", "resdivcontainer")
    res.setpersist(true)
    res.setselectedClassTarget("link") //"link" or "linkparent"
    res.init()


    }

    }

    </script>


    ---here is the tab that is not working right---
    <ul id="restabs" class="shadetabs">
    <li><a href="ajax_ext/external_tel_bus.asp" rel="rescontainer">Telephone</a></li>
    <li><a href="ajax_ext/external_internet_service.asp" rel="rescontainer">Internet Service</a></li>
    <li><a href="ajax_ext/external_PBX.asp" rel="rescontainer">PBX</a></li>
    <li><a href="ajax_ext/external_IT_support.asp" rel="rescontainer">IT Support</a></li>
    <li><a href="ajax_ext/external_video_con.asp" rel="rescontainer">Video Conferencing</a></li>
    </ul>
    <!--<a href="#" rel="#default" class="selected"-->
    <div id="resdivcontainer" style="border:1px solid gray; width:100%; margin-bottom: 1em; padding: 10px">
    <p>external nested page2</p>
    </div>

    <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("externalnested2.asp")!=-1){
    var res=new ddajaxtabs("restabs", "resdivcontainer")
    res.setpersist(true)
    res.setselectedClassTarget("link") //"link" or "linkparent"
    res.init()
    }

    }

    </script>

    the url where you can view it in a browser is http://www.ntslink.net/ajax_tabs.asp

    Thank you for any suggestions
    Billy Johnson

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

    Default

    You are using two "onajaxpageload" events, which is incorrect, as one will be overridden by the other. Regardless of how many of your tabs are nested, on the main page, you should only call "onajaxpageload" once, but inside the custom function, initalize different sub tabs depending on the URL of the tab item clicked on. So something like:

    Code:
    countries.onajaxpageload=function(pageurl){
    if (pageurl.indexOf("externalnested.asp")!=-1){
    var res=new ddajaxtabs("restabs", "resdivcontainer")
    res.setpersist(true)
    res.setselectedClassTarget("link") //"link" or "linkparent"
    res.init()
    }
    else if (pageurl.indexOf("externalnested2.asp")!=-1){
    var anotheruniquevar=new ddajaxtabs("restabs2", "resdivcontainer2")
    anotheruniquevar.setpersist(true)
    anotheruniquevar.setselectedClassTarget("link") //"link" or "linkparent"
    anotheruniquevar.init()
    }
    }
    and so on. Make sure when you call:

    Code:
    new ddajaxtabs("restabs", "resdivcontainer")
    each time, that the two parameters entered properly correspond to the IDs of the tab interface/ content container in question.

    p.s: Please format any code in your post using the CODE (#) tag. This makes it a lot easier to read it.

  3. #3
    Join Date
    Nov 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank You It worked great....
    Have a good weekend...

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
  •