CODEWITHSUNDEEP
javascriptjqueryhtmltabsjquery-tabs
stratis
stratis

Reputation: 8042

How can I keep the selected tab upon page refresh in JQuery Mobile?

Simple question: How can I keep the selected tab upon page refresh in JQuery Mobile (1.4.2)?

More specifically: I have a results page which is passed through a Django paginator first to split multiple rows of results from my database, however on page selection (?page=1, ?page=2 etc. or even refresh) I lose the user selected tab. How can I fix this?

I am using code very similar to the one found in the docs:

<div data-role="tabs" id="tabs">
    <div data-role="navbar">
        <ul>
            <li><a href="#one" data-ajax="false">one</a></li>
            <li><a href="#two" data-ajax="false">two</a></li>
        </ul>
    </div>

    <div id="one" class="ui-body-d ui-content">
        <h1>My results as an ordered list</h1>
        <ol>
            <li>Coffee</li>
            <li>Milk</li>
        </ol>
    </div>

    <div id="two">
        <h1>My results as an unordered list</h1>
        <ul>
            <li>Coffee</li>
            <li>Milk</li>
        </ul>
    </div>
</div>

Upvotes: 1

Views: 277

Answers (1)

Ivan
Ivan

Reputation: 406

I'm assuming that you can tweak the request url using anchors

As Rob suggested in the comment, you can go for location hashes, to solve your problem:

Set for every tab you want to track a link with a unique hash tag and keep it correlated to the target div id.

<a href="#one" data-ajax="false">one</a> //one
<a href="#two" data-ajax="false">two</a> //two

//corresponds to

<div id="one">...</div>
<div id="two">...</div>

Then read the hashes and take proper actions:

 function uri_get() {
        return window.location.hash.slice || "#default";
    }

 $(document).ready(function () {
     var $uri;

     uri = $(uri_get());  //$uri now contains your tab element.  

  });

Upvotes: 1

Related Questions