JQuery Tabs in asp.net to stay on reload

Question

i'm having a JQuery tab on my page and currently when i reload or run some serverside codes , the tab would go back to the first one, is there a way to make the tabs stay? I would like my tab to stay on the current selected tab rather than go back to the first tab when the page reloads

My JQuery:

 $(function () {
           var tabContainers = $('div.tabs > div');
           $('div.tabs ul.tabNavigation a').click(function () {
               tabContainers.hide();
               tabContainers.filter(this.hash).show();
               $('div.tabs ul.tabNavigation a').removeClass('selected');
               $(this).addClass('selected');
               return false;
           }).filter(':first').click();

       });

My tabs:

<div class="tabs">
        <ul class="tabNavigation">
            <li><a href="#Annoucments">Annoucments</a></li>
            <li><a href="#Events">Events</a></li>
            <li><a href="#Photos">Photos</a></li>
            <li><a href="#JobOpportunities">Job Opportunities</a></li>
            <li><a href="#Contacts">Contacts</a></li>
            <li><a href="#Videos">Videos</a></li>
        </ul>
        <div id="Annoucments" class="ContentDIV">
      ..

        </div>
        <div id="Events" class="ContentDIV">

            ..
        </div>

        <div id="Photos" class="ContentDIV">
           ..

        </div>

        <div id="JobOpportunities" class="ContentDIV">
           ..
        </div>

        <div id="Contacts" class="ContentDIV">
           ...

        </div>

        <div id="Videos" class="ContentDIV">
           ..

        </div>

    </div>

Hey, try adding update panels in your contentDivs. You can achieve this by using ASP Ajax too. Give it a try. Its bit tricky but nice solution. — Ketan Modi, Aug 06 '12 at 08:11

score 0 · Answer 1 · edited May 23 '17 at 11:48

0

Put a get parameter in your page url. So you could have yourpage.aspx?page=1 for example. Then just pull that parameter out of the querystring and either apply the 'selected' class in your server side code (which would be best) or in jQuery on the page directly (not as good a solution but it'll work too) to the appropriate tab.

EDIT (Code Sample)

$('#[formID]').onSubmit(function () {
    var tab = $('.selected').prop('href');
    // Append a hidden field to the form containing tab. Example below
    return true;
}

...and then when you load your page from the server, simply look at the value passed and apply the 'selected' class to the element.

Example: jQuery - add additional parameters on submit (NOT ajax)

edited May 23 '17 at 11:48

Community

1
1

answered Aug 06 '12 at 06:13

Levi Botelho

24,626
5
61
96

So click each tab would then perform a GET on the same page? That defeats the purpose of having tabs, no? – Babak Naffas Aug 06 '12 at 06:14
No it wouldn't perform a GET on the same page... the GET would only be when the page is reloaded... when you submit a form/reload hook some code in to get the ID of the currently selected page. Clicking another tab displays the tab... reloading the page/submitting the form adds the parameter. I'm busy at the moment but will give you some code in a couple hours if you can wait that long. – Levi Botelho Aug 06 '12 at 06:54
There's a sample. Won't be able to reply to any more questions unfortunately until this evening (CEST). – Levi Botelho Aug 06 '12 at 07:04

score 0 · Answer 2 · answered Aug 06 '12 at 06:13

0

You need to save user state somewhere:

Url - parse url and determine whether it's yours tab secion or not.
Cookies - write to cookie user information (e.g. selected tab).
Session - same as for cookie.
Custom Hidden field or asp.net ViewState.

answered Aug 06 '12 at 06:13

user854301

5,383
3
28
37

score 0 · Answer 3 · answered Aug 06 '12 at 06:13

0

One thing you can try is to keep a hidden field that maintains the href value of the currently selected tab. This way, when there is a postback, you can read the value from that hidden field and select the correct tab.

answered Aug 06 '12 at 06:13

Babak Naffas

12,395
3
34
49

JQuery Tabs in asp.net to stay on reload

3 Answers3