Search jQuery

jQuery Forum

Getting Started

oasiscrit..

Active Tab

in Getting Started • 7 years ago

I have two pages and in each page i use a Navbar in the header of the page:

<div data-role="navbar">
                    <ul>
                        <li><a class="ui-btn-active" href="#page_1" data-icon="star" data-ajax="false">Page 1</a></li>
                        <li><a href="#page2" data-icon="grid" data-ajax="false">>Page2</a></li>
                    </ul>
                </div>



<div data-role="navbar">
                    <ul>
                        <li><a href="#page_1" data-icon="star" data-ajax="false">Page 1</a></li>
                        <li><a class="ui-btn-active" href="#page2" data-icon="grid" data-ajax="false">>Page2</a></li>
                    </ul>
                </div>

As you can see, I use the class="ui-btn-active" for the tab I want to be selected/active. It works fine but just once. When I go back to page 1, no tab is selected and after that, when I go to page 2, also no tab is selected. How can I prevent this?

Replies(4)

watusiware

Re: Active Tab

7 years ago

(This is a jQuery Mobile question.)

Since you use data-ajax="false", it isn't possible to persist the active state within the browser, at least not without some gymnastics. The document is reloaded when you change pages, and thus all browser content and state is lost.

As well, your site or app will suffer performance-wise, since this means that you are re-loading (from cache, at least!) a very large CSS and Javascript framework on every page.

Finally, page transitions are not possible in this case.

If you want to persist any state (active tab, variable content, really anything else) then you have a few choices:

- Use a cookie

- Use localstorage

- Send the state to your server in the URL query string, and then the server will generate the page accordingly

When I see the use of data-ajax="false" I always ask the poster to consider whether it really makes sense for their project to use jQuery Mobile at all, since this negates many of the advantages of using jQuery Mobile in the first place.

If you just like the widgets, you can find equivalents (and typically a more modern look!) in many CSS-only frameworks (Bootstrap, etc.) and avoid a lot of bother and complication.

oasiscrit..

Re: Re: Active Tab

7 years ago

Well, even when I delete this statement :data-ajax="false" it do not work. But I will try it with localStorage.
thanks.

oasiscrit..

Re: Re: Active Tab

7 years ago

Ok I am facing some troubles because I have this navbar twice, and I need to check wheter Web_Page 1 or Web_Page 2 is currently active. But how can I check it?

gautamx07

Re: Active Tab

7 years ago

I had a similar problem a few days ago and localstorage seemed to be the magical solution, i would probably go with localstorage , i am pritty sure , its supported in all major browsers.

Response title

Attachments

jQuery Forum

Active Tab

Replies(4)

Re: Active Tab

Re: Re: Active Tab

Re: Re: Active Tab

Re: Active Tab

Statistics

Tags

Actions

Related Posts