DNN Forums

Ask questions about your website to get help learning DNN and help resolve issues.

dnnTabs - set active tab

Sort:
You are not authorized to post a reply.





Veteran Member





    Hi all,

    I have a strange problem with the dnnTabs() jQuery plugin.

    Part of the ascx file ([ = <, ] = >):

    [div id="TabsPanel" class="dnnForm"]
       [asp:BulletedList  ID="TabHeader" runat="server"
          CssClass="dnnAdminTabNav"
          DisplayMode="HyperLink" /]
       [!-- The rendered output of this looks like
          [ul class="dnnAdminTabNav"]
             [li][a href="#Tab1"]Tab 1[/a][/li]
             [li][a href="#Tab2"]Tab 2[/a][/li]
             [li][a href="#Tab3"]Tab 3[/a][/li]
          [/ul]
       --]
       [asp:Repeater ID="ContentRepeater" runat="server"]
          [!-- Here goes a web user control that renders the content, the output is something like
             [div id="#Tab1" class="dnnClear"]
                Content Tab 1
             [/div]
             [div id="#Tab2" class="dnnClear"]
                Content Tab 2
             [/div]
             [div id="#Tab3" class="dnnClear"]
                Content Tab 3
             [/div]
          --]
       [/asp:Repeater]
    [/div]
    
    

    In the OnPreRender event, I inject some Javascript that renders like this:

    jQuery(function ($, sys) {
       function setUpTabs() {
          $("#TabsPanel").dnnTabs();
       }
       $(document).ready(function () {
          setUpTabs();
          Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function () {
             setTabs();
          });
       });
    }(jQuery, window.Sys));
    
    

    That works fine. Now I want to have the second tab activated, e.g. by a value from a query string parameter, or whatever. The rendered script shows as:

    jQuery(function ($, sys) {
       function setUpTabs() {
          $("#TabsPanel").dnnTabs({ "active": 1 });
       }
       $(document).ready(function () {
          setUpTabs();
          Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function () {
             setTabs();
          });
       });
    }(jQuery, window.Sys));
    
    

    The tabs are working OK, but instead of Tab 2, there is always the last active tab activated, the same as if I don't pass that value. The value seems to come from a cookie named "dnnTabs-TabsPanel", and the passed value is simply overwritten by the cookie. But even if I remove the cookie, Tab 2 is not activated, but Tab 1 in this case.

    Any ideas how to do that?

    Happy DNNing!
    Michael

    Michael Tobisch
    DNN★MVP

    dnnWerk Austria
    DNN Connect





    Veteran Member





      Sorry, my fault. The correct syntax is

      $("#TabsPanel").dnnTabs().tabs({ 'active': x });
      
      
      Happy DNNing! Michael

      Michael Tobisch
      DNN★MVP

      dnnWerk Austria
      DNN Connect
      You are not authorized to post a reply.

      These Forums are dedicated to the discussion of DNN Platform.

      For the benefit of the community and to protect the integrity of the ecosystem, please observe the following posting guidelines:

      1. If you have (suspected) security issues, please DO NOT post them in the forums but instead follow the official DNN security policy
      2. No Advertising. This includes the promotion of commercial and non-commercial products or services which are not directly related to DNN.
      3. No vendor trolling / poaching. If someone posts about a vendor issue, allow the vendor or other customers to respond. Any post that looks like trolling / poaching will be removed.
      4. Discussion or promotion of DNN Platform product releases under a different brand name are strictly prohibited.
      5. No Flaming or Trolling.
      6. No Profanity, Racism, or Prejudice.
      7. Site Moderators have the final word on approving / removing a thread or post or comment.
      8. English language posting only, please.

      Would you like to help us?

      Awesome! Simply post in the forums using the link below and we'll get you started.

      Get Involved