CODEWITHSUNDEEP
jqueryasp.netcookiestabs
Ley47
Ley47

Reputation: 123

Tab keeps returning to the first tab jquery

I have two tabs the first one only has gridview and the other tab has buttons. now whenever I click a button on the second tab it must populate the gridview on the second tab according to it's functionality, it is indeed populated however the page goes back to the first tab then I have to click the next tab to view the populated gridview in the second tab. I heard that to make it stay to that tab I must use cookies. But I am new to jquery so I really have no idea how to do this. this is my code. 

 $(function() {
var tabs = $( "#tabs" ).tabs();
 tabs.find( ".ui-tabs-nav" ).sortable({
 axis: "x",
 stop: function() {
 tabs.tabs( "refresh" );
             }
 });
  });

And here are the div:

<div id="tabs" class="tab"> 
          <ul> 
         <li><a href="#tabs-2" >Visitors For Today</a></li> 
         <li><a href="#tabs-1">Reports</a></li> 
          </ul>
    <div id = "tabs-1">
         //some codes
    </div>
    <div id = "tabs-2">
         //somecodes
    </div>



</div>

I'm sorry I'm really not good at this but is this right? 

 $(function() {
    var tabs = $( "#tabs" ).tabs({
    cookie: {
               name: 'my-unique-cookie',
               expires: 1,
               path: '/'
                     }
            });
        tabs.find( ".ui-tabs-nav" ).sortable({
            axis: "x",
             stop: function() {
             tabs.tabs( "refresh" );
             }
          });
     });

Upvotes: 1

Views: 1007

Answers (4)

Ley47
Ley47

Reputation: 123

Sorry for the late update. I have solved this problem without using cookie since it's in asp. here's how it was : 

$("#tabs").tabs({

activate: function() { 

var selectedTab = $("#tabs").tabs('option', 'active');

$("#<%= hdnSelectedTab.ClientID %>").val(selectedTab);

//alert(selectedTab);

},

active: $("#<%= hdnSelectedTab.ClientID %>").val()

});

Then on asp :

<asp:HiddenField ID="hdnSelectedTab" runat="server" Value="0" />

Hope this helps.. Thank you for all the help. I wasn't able to use cookies since I found it hard to understand sorry I'm really new to jquery

Note: I was using jquery-ui 1.9 by the way the codes will have changes depending on your version

Upvotes: 0

Tieson T.
Tieson T.

Reputation: 21191

It really should be as simple as adding a reference to the cookie plugin (download it and add it to your project, then add a local reference), and then amending your tabs() call to be something like this:

    $("#tabs").tabs({
        cookie: {
            name: 'my-unique-cookie',
            // store cookie for a day, without, it would be a session cookie
            expires: 1,
            path: '/'
        }
    });

You would want to customize both the name and path options. The options reference is at https://github.com/carhartl/jquery-cookie#cookie-options - left as-is, the cookie will be valid for the entire site and be named my-unique-cookie.

Upvotes: 1

Jean-Francois Gagnon
Jean-Francois Gagnon

Reputation: 3290

Like you said, you can use jquery cookies (http://www.electrictoolbox.com/jquery-cookies/) to save the index of the current tab, and then when you reload the page, set the active option of tabs() to the index you just saved (http://api.jqueryui.com/tabs/#option-active).

Upvotes: 1

AURIGADL
AURIGADL

Reputation: 2032

Utilizing browser history and reload buttons

you can use http://www.asual.com/jquery/address/

Watch the demo

http://www.asual.com/jquery/address/samples/express/

Upvotes: 0

Related Questions