Reload tab on button click

Question

I have a form which contains tabs and sub tabs as given below:

<div id="tabs">
        <ul>
            <li><a href="#tab_details">Details</a></li>
            <li><a href="#tab_dia">DIA</a></li>
        </ul>
        <div id="tab_details">
            <code>
        </div>
        <div id="tab_dia">
            <div id="dia_sub_tabs">
                <ul>
                    <li><a href="#DIA_details">DIA Details</a></li>
                    <li><a href="#IA_info">IA Information</a></li>
                </ul>
                <div id="DIA_details">
                    <code>
                </div>
                <div id="IA_info">
                    <code>
                </div>
            </div>
        </div>  
    </div>

I am saving the data for each of the tabs separately on button click from my form using javascript:

<span><a href="javascript:void(0)" id="save_changes_id" class="button_links">Save Changes</a></span>

The JS code is as follows:

$("#save_changes_id").click(function() {
    //  To retrieve the current TAB and assign it to a variable ...
    var curTab = $('.ui-tabs-active');      
    var curTabPanelId = curTab.find("a").attr("href");

    if(curTabPanelId == "#tab_dia"){
        var curTab = $('#dia_sub_tabs .ui-tabs-active');
        var curTabPanelId = curTab.find("a").attr("href");
    }
    responseData = doAjaxCall($(curTabPanelId + " form"));

        if(responseData == 1) 
            showMessage('status_msg', 'Project details updated successfully', 'green');
        else
            showMessage('status_msg', 'Error: Please check all the fields', 'red');

});

What I wanted was to reload the page each time I click on save button and show the active tab from which I had given save after reload.

I tried giving window.location.reload() , but was showing the first tab after reload and not the tab which was active before.

Please suggest a solution for this. Thanks in advance.

if you want to do it at client side ...use localStorage...you want to know how? — Anand Jha, Oct 29 '13 at 09:46
@anand4tech Can you give an example as I am relatively new to this and have never used localStorage — Elvin Varghese, Oct 29 '13 at 09:59

melc · Answer 1 · 2013-10-29T10:59:30.460

If you reload the page then you cannot have js state as it will also be reloaded. One way of doing this without contacting the server regarding the ui behaviour, would be to pass the active tab as an argument either anchor/window.location.hash or url query param. Then from your js you can parse the url from window.location and adjust your ui accordingly.

Other approaches could be to use cookies, html5 web storage (local storage, session storage). However for your case, i think the most lean and user friendly (e.g. bookmarkable url) would be to use the url.

    $(document).ready(function () {

    $(this).parent('li').addClass('ui-tabs-active');
    var activeTab = window.location.hash;
    $('a[href="' + activeTab + '"]').parent('li').addClass('ui-tabs-active');


    $('a').click(function () {
        $('li.ui-tabs-active').removeClass('ui-tabs-active');
        $(this).parent('li').addClass('ui-tabs-active');
    });

    $("#save_changes_id").click(function () {

        var curTab = $('.ui-tabs-active');
        var curTabPanelId = curTab.find("a").attr("href");

        window.location.href = window.location.href.split("#")[0] + curTabPanelId;
        window.location.reload();

        /*
    if(curTabPanelId == "#tab_dia"){
        var curTab = $('#dia_sub_tabs .ui-tabs-active');
        var curTabPanelId = curTab.find("a").attr("href");
    }
    responseData = doAjaxCall($(curTabPanelId + " form"));

        if(responseData == 1) 
            showMessage('status_msg', 'Project details updated successfully', 'green');
        else
            showMessage('status_msg', 'Error: Please check all the fields', 'red');*/

    });
});

have a look at the fiddle, the code related to ajax has been commented out for clarity. The active class is being added on click, you probably have some other procedure, just added this in order to demonstrate the selection of a choice/tab and how this is processed after reload. http://jsfiddle.net/ChTGc/4/show/

Can you give a small example as I am relatively new with JS. — Elvin Varghese, Oct 29 '13 at 09:53
Its not showing proper main tab after reload(still goes to the first tab) even though its retaining the tab which was active inside the sub tab when we select that tab after reload. — Elvin Varghese, Oct 29 '13 at 11:40
@ElvinVarghese please take a better look the fiddle is http://jsfiddle.net/ChTGc/4/show/ , you need to click the link/tab and then select save changes. You were probably checking before the edit of the answer, when it was hardcoded for simplicity. To look at the code remove the show part from the fiddle url. — melc, Oct 29 '13 at 12:25
@ElvinVarghese on the fiddle it works fine, what part is different in your code? please post so i can give you some feedback? — melc, Oct 29 '13 at 13:02
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/40185/discussion-between-elvin-varghese-and-melc) — Elvin Varghese, Oct 29 '13 at 13:13
@ElvinVarghese if this answer met your needs please mark it as answered in order to assist other visitors as well, thanks — melc, Nov 11 '13 at 14:25

score 0 · Answer 2 · edited May 23 '17 at 12:28

0

Try this Example

sessionStorage is cleared automatically when the browser is closed. It stores data for one session.

Read this Documentation: sessionStorage

edited May 23 '17 at 12:28

Community

1
1

answered Oct 29 '13 at 10:02

super

2,288
2
21
23

score 0 · Answer 3 · answered Oct 29 '13 at 10:11

0

try this logic,

after clicking save button you do...

$("#save_changes_id").click(function() {
  // set the active tab id in localStorage against key 'ACTIVE_TAB_ID'

  window.localStorage.setItem('ACTIVE_TAB_ID',yorActiveTabId);//yorActiveTabId is js  varible which contains active tab id.

});

now After reloading the page get the id of active tab like...

var activeTabId=window.localStorage.getItem('ACTIVE_TAB_ID');

now using js you can add class to make active to the tab using 'activeTabId'

you can use sessionStorage instead of localStorage but after closing the browser your data will be lost but if you use localStorage,data won't loss for life time.

answered Oct 29 '13 at 10:11

Anand Jha

10,404
6
25
28

Thanks a lot for your time....am currently working on that, if possible can you please give an example to make the tab active as I was having some issues with that. – Elvin Varghese Oct 29 '13 at 10:44
lets say 'commonClass' is a class present in all tabs and 'activeClass' is the class which is included for active tab then your js script would be like---$('.commonClass').removeClass('activeClass'); $('#'+activeTabId).addClass('activeClass');----I guess it would help. – Anand Jha Oct 29 '13 at 11:04
your each tab should have id attribute – Anand Jha Oct 29 '13 at 11:11
its not necessary, you can declare it as local variable so that it should come under the scope where you will use this variable. – Anand Jha Oct 29 '13 at 11:39
I don't know why, but its not making the tab active after reload....still goes to 1st tab. – Elvin Varghese Oct 29 '13 at 12:02
check class associated with the active tab, are you getting value of 'activeTabId' perfactly? remove class(which makes active) from all tab and then add class to selected tab...try debugging writing alerts...are you writing any code which makes first tab active all the time...if by default your first tab is active then check your js code properly. – Anand Jha Oct 29 '13 at 12:05

Reload tab on button click

3 Answers3