1

I am using Atlassian Javascript framework to create tabs in my page. Every time I refresh the page it goes back to the default tab and leaves the selected tab. I added this piece of code after searching for the same problem in stack overflow but it is not working.

<script>
    $('#prod-discovery a').click(function (e) {
        e.preventDefault();
        $(this).tab('show');
    });

    // store the currently selected tab in the hash value
    $("ul.tabs-menu > li > a").on("shown.bs.tab", function (e) {
        var id = $(e.target).attr("href").substr(1);
        window.location.hash = id;
    });
    $('.active').removeClass('active');

    // on load of the page: switch to the currently selected tab
    var hash = window.location.hash;
    $('#prod-discovery a[href="' + hash + '"]').tab('show');

</script>

This is the code I have for creating tabs:

   <ul class="tabs-menu" role="tablist" id="prod-discovery">
        <li class="menu-item active-tab" role="presentation">
            <a href="#one" id="aui-uid-0-1430814803876" role="tab" aria-selected="true"><strong><h2>Tab One</h2></strong></a>
        </li>

        <li class="menu-item" role="presentation">
            <a href="#two" id="aui-uid-1-1430814803876" role="tab" aria-selected="false"><strong><h2>Tab Two</h2></strong></a>
        </li>

        <li class="menu-item" role="presentation">
            <a href="#three" id="aui-uid-1-1430814803876" role="tab" aria-selected="false"><strong><h2>Tab three</h2></strong></a>
        </li>

        <li class="menu-item" role="presentation">
            <a href="#four" id="aui-uid-1-1430814803876" role="tab" aria-selected="false"><strong><h2>Tab Four</h2></strong></a>
        </li>

        <li class="menu-item" role="presentation">
            <a href="#five" id="aui-uid-1-1430814803876" role="tab" aria-selected="false"><strong><h2>Tab5</h2></strong></a>
        </li>
    </ul>

For reference you can also have a look into http://jsfiddle.net/alok15ee/5wpmsqe5/1/

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
user2900150
  • 433
  • 7
  • 13

2 Answers2

0

On the line:

$('#prod-discovery a[href="' + hash + '"]').tab('show');

isn't there a '#' missing? When extracting the href value out of the current tab using substring(1), you're removing the hash.

Try to make it work by replacing the line above with:

    $('#prod-discovery a[href="#' + hash + '"]').tab('show');
remolueoend
  • 71
  • 1
  • 5
  • Now I am getting Uncaught TypeError: $(...).tab is not a function – user2900150 Jul 21 '15 at 13:03
  • Could you please update your JSFiddle at http://jsfiddle.net/api/post/library/pure/? It's empty.. – remolueoend Jul 21 '15 at 13:15
  • Still empty. Is it available under a new URL? – remolueoend Jul 21 '15 at 13:30
  • Thank you. Did you test my solution on JSFiddle? That would clearly not work due to the missing libraries. The method .tab() is not implemented by jQuery itself, it is a part of a library you are using. Try to test it directly in your source, where all libraries are available (atlassian, etc.) – remolueoend Jul 21 '15 at 13:40
  • Thanks a lot remo, that's seems to be bootstrap api. It is not working with the plugin code and gives the same error. So can you please suggest something that will work with JQuery. I tried with saving cookie as well but it is not working well. – user2900150 Jul 21 '15 at 13:43
  • 1
    Using a hash in the URL is the right way IMHO. This concept also has additional advantages: You can create links not only to a page, but to a specific tab by including the hash into the link URL. This wouldn't be possible by using cookies/local storage, etc. Your current concept is fine, just check all library dependencies and your HTML structure (especially the necessary classes and data-dash attributes). I'm further not sure which library you use for creating and managing the tabs. But using this library (aui.js/bootstrap.js) to open the desired tab is the right way. – remolueoend Jul 21 '15 at 14:19
  • 1
    It has probably to do with the fact that you are using the aui libraries (aui.js and aui.css). Using the newest version of jQuery, bootstrap.js and bootstrap.css, your JSFiddle example works perfectly: http://jsfiddle.net/5wpmsqe5/5/ – remolueoend Jul 21 '15 at 14:37
  • Thanks Remo I will upload these two files in my plugin. – user2900150 Jul 21 '15 at 14:51
0

I needed to add <div class="aui-tabs horizontal-tabs" data-aui-persist="true" role="application" id="productdiscoverytabs"> to make sure tab state persists which uses HTML5 Local storage and also needed to remove to active-tab class.

user2900150
  • 433
  • 7
  • 13