Jump to:

2011 Posts in 1436 Topics by 620 members

Form Questions

SilverStripe Forums » Form Questions » [Solved] Link back to Tab

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Page: 1
Go to End
Author Topic: 1758 Views
  • Ricardona
    Avatar
    Community Member
    26 Posts

    [Solved] Link back to Tab Link to this post

    Hi all,

    I have a form which has a TabSet with severals Tab, each Tab has links to perform actions on other pages.

    The problem we have is that when navigating to another page from a Tab, and return not reopen the original open, if not initial Tabset Tab.

    For example:

    _____ _____
    |Tab1 \-- |Tab2 \ User select Tab2 and navigate to other page with a link in Tab2
    ----------|

    User press back button

    _____ _____
    |Tab1 \-- |Tab2 \ Now Tab1 is selected
    |----------

    Can we change this behavior?

    We saw that each Tab is marked with #, but this is not saved with a link back to navigate to another page.

    Thanks in advance.

  • Ricardona
    Avatar
    Community Member
    26 Posts

    Re: [Solved] Link back to Tab Link to this post

    I changed default Tabs from SS distribution a JQuery Tabs, a cookie is then used to determine the initially selected tab.

    http://docs.jquery.com/UI/Tabs#option-cookie

    Enjoy

    Ricardo

  • Juanitou
    Avatar
    Community Member
    323 Posts

    Re: [Solved] Link back to Tab Link to this post

    Hi Ricardo.

    I was looking for that. I have some tabs as you had (with the SS code). Could you please further explain the cookie code? The jQuery UI site is down, I cannot download the Tabs plugin, so I thought I could got the solution even before the actual code! ;-)

    Regards,
    Juan

  • Juanitou
    Avatar
    Community Member
    323 Posts

    Re: [Solved] Link back to Tab Link to this post

    Hey, I found it by myself! The cookie isn’t stored at every tab click, but only when going out of the page. Here’s the JS code (which not uses Tabs plugin, but the Cookie one):

    ;(function($) { // Wrapper to prevent errors with other scripts
    $(document).ready(function() { // jQuery has a simple statement that checks the document and waits until it's ready to be manipulated, known as the ready event

       var curChildIndex; // Define as global
       
       if($.cookie('active_tab') == null) { // If no cookie is set…
          $('ul.tabNav li:first').addClass('current'); // …mark as current the first Title item
          $('.tabContainer .tab:first').addClass('current').slideDown('fast', myClick); // …show the first tab content
       } else {
          var cookieChildIndex = $.cookie('active_tab');
          $('ul.tabNav li:nth-child('+cookieChildIndex+')').addClass('current'); // …mark as current the Title item stored in cookie
          $('.tabContainer div:nth-child('+cookieChildIndex+')').addClass('current').slideDown('fast', myClick); // …show the content of the corresponding tab
       }

       function myClick() {
          $('ul.tabNav a').click( // On click…
             function() {
                curChildIndex = $(this).parent().prevAll().length + 1; // Sets the current li index   
                $(this).parent().parent().children('.current').removeClass('current'); // Remove the old current class from li
                $(this).parent().addClass('current'); // Adds the current class to the current li
                $(this).parent().parent().next('.tabContainer').children('.current').slideUp('fast',function() { // Slides up the old tabContainer div (the current tab)
                   $(this).removeClass('current');
                   $(this).parent().children('div:nth-child('+curChildIndex+')').slideDown('normal',function() { // Slides down the new tabContainer div
                      $(this).addClass('current');
                   });
                });
                return false;
             }
          );
       }
       
       $('a').not($('ul.tabNav a')).click(function(){$.cookie('active_tab', curChildIndex)}); // Set a session cookie with the current li index when going to another page

    })
    })(jQuery);

    It’s one of my first JS codes, don’t expect it to be a model…

    Cheers,
    Juan

    1758 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.