• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 674
  • Last Modified:

JQuery tabs - how do go to the selected tab after reloading a page

I use the following script, but not working. I always go back to the first tab after reloading a page. For an example, If I select tab2, after reloading a page, i like to go back to selected tab2.
I looked at the JQuery menu, but i do not understand. Please advise and correct my mistake


$(function(){
      $('#tabs').tabs();
      var $tabs = $('#example').tabs();
      var selected = $tabs.tabs('option', 'selected');
      $tabs.tabs('select', selected);
});
</script>
0
unistudent
Asked:
unistudent
  • 4
  • 3
3 Solutions
 
BuggyCoderCommented:
see this for your reference:-
http://jqueryui.com/demos/tabs/
0
 
unistudentAuthor Commented:
I did that's why I added the following two lines


                        // Tabs
                      $('#tabs').tabs();
                      var $tabs = $('#tabs').tabs();
                      var selected = $tabs.tabs('option', 'selected');
                      alert("selected[" + selected + "]");
                       $tabs.tabs('select', selected);

after a page is reloaded, the selected var is set back to 0 "The first tab"
0
 
BuggyCoderCommented:
$('#example').tabs({
    load: function(event, ui) {
        $(ui.panel).delegate('a', 'click', function(event) {
            $(ui.panel).load(this.href);
            event.preventDefault();
        });
    }
});
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
designatedinitializerCommented:
You'll have to store that info in a cookie and retrieve it on page load.
You can do this inside the 'select' event handler:
$.cookie("myselectedtab", $tabs.tabs('option', 'selected'));

Open in new window


and this, inside a $(document).ready:
$tabs.tabs('select',$.cookie("myselectedtab"));

Open in new window

0
 
unistudentAuthor Commented:
Hi designatedinitializer

would you give me an example of select event handler? Thanks
0
 
BuggyCoderCommented:
did you try the script given by me... the key is to set preventDefault=false....
0
 
unistudentAuthor Commented:
I did try, but it still go back to the first tab after reloading the page. Sorry, it may not be a good question but this is my first time to use JQuery.

Below is my script and HTML.

<script type="text/javascript">
$(function(){

 $('#tabs').tabs();

 $('#tabs').tabs({
   load: function(event, ui) {
         $(ui.panel).delegate('a', 'click', function(event) {
            $(ui.panel).load(this.href);
            event.preventDefault();
         });
   }
  });

});
</script>

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
HTML codes

<div id="tabs">
  <ul>
     <li><a href="#tabs-1"">Sign Up</a></li>
     <li><a href="#tabs-2">Member Logon</a></li>
     <li><a href="#tabs-3">Forgot Password</a></li>
  </ul>

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

Would you please advise how to resolve this issue as I am very new in JQuery?
0
 
unistudentAuthor Commented:
I also try the following, but it still does not work.'


<script type="text/javascript">
$(function(){
      $(".selector").tabs({cookie: { expires:30 }});
      
      // Tabs
      $('#tabs').tabs();
      //hover states on the static widgets
      
      $(document).ready(function() {
         $("tabs").tabs('select', $.cookie("tabNumber"));
         $("tabs").click(function() {
           $.cookie("tabNumber", $("tabs").tabs('option', 'selected'));
         });
      });
      
      $('#dialog_link, ul#icons li').hover(
            function() { $(this).addClass('ui-state-hover'); },
            function() { $(this).removeClass('ui-state-hover'); }
      );
      
      $('#tabs').tabs({
          load: function(event, ui) {
              $(ui.panel).delegate('a', 'click', function(event) {
                  $(ui.panel).load(this.href);
                  event.preventDefault();
              });
          },
      });

});
</script>
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now