Second navbar on a page doesn't get active state for the second time

[DreifGenov]

If you open this page - http://m.geometry.omskhost.ru/geometrician/#lobachevsky, you can see that I have 2 same navbars on a page.
Now tab #1 is active, and #1 are active on both navbars.
Now click #2 on any navbar, it slides to page #2, and both #2 are active.
Click #3, the same.

Now go back to #2 (click again #1). You see? Only the bottom #2 gets active state, but the top one not. But both have class="ui-btn-active" in the code.
Go back to #1, the same problem - only the bottom one gets active state.

The problem remains on all browsers (mobile & desktop) since alpha to the latest (http://code.jquery.com/mobile/latest/jquery.mobile.min.js, Thu Sep 8 14:06:02 2011 -0700).

UPD: Sometimes both do not get active state.

[toddparker]

Hi all - Is this still an issue with 1.0.1?
Also please test on master (1.1-pre): www.jquerymobile.com/test

If so, we need a test page with steps to reproduce. Template here:
http://jsbin.com/uwofov/edit

[maxpaynestory]

Hi i am facing the same with 1.0.1. I have four items in navbar. #1 is active.

i tapped #2. #2 is selected.

i tapped #3. #3 is selected.

I again tapped #2. Now it stopped giving selected states.

After then the problem goes on and on.

[toddparker]

@DreifGenov or @maxpaynestory Can you create a test page using the template above?

[maxpaynestory]

I have created a test page here.

http://dl.dropbox.com/u/63530626/jqm_navbar/navbar_test.html

[ghost]

got the same issue

see this http://jsfiddle.net/ca11111/CxFWh/

I'm wondering if I'm doing it the right way with navbar, or is it a bug, (ui-btn-active class is not added to the selected tab when you return to it)

happens on any browser, any OS

[jaspermdegroot]

The cause of this issue is that the framework removes the ui-btn-active class upon certain page transition and click events. This should only happen after the class is added by the framework self and not when the class is in the markup.

Interesting fact is that all examples in this thread use a multi-page template and I don't see this happening in this example that uses single page navigation model http://jquerymobile.com/test/docs/toolbars/footer-persist-a.html

@toddparker - I am going to look into this. Can you flag it 1.1.1 ?

[ghost]

yes the difference between http://jquerymobile.com/test/docs/toolbars/footer-persist-a.html and http://jsfiddle.net/ca11111/CxFWh/2/
I have put all 3 pages in the same time, it was easier, but if it works only by putting them in seperate file, I will try

thx

[jaspermdegroot]

@auburtin

I just checked the JS and the reason the problem doesn't occur on that page is because it is a persistent footer.
So actually, I don't think multi-page or single pages makes a difference. But that doesn't mean you can't test it :-)

[ghost]

data-position="fixed" ? I have put it also in my navbar, the difference is just it's in header not in footer

[jaspermdegroot]

@auburtin

See here: http://jquerymobile.com/demos/1.0.1/docs/toolbars/footer-persist-a.html
Somehow this info has been removed from the docs of 1.1 version so I link to 1.0.1.

Although that example is about a fixed footer, I think it would work for non-fixed and header as well.
Could you test if adding ui-state-persist to the links in your header with ui-btn-active solves it?

[jaspermdegroot]

@auburtin - I found the info in the current docs. It has been moved: http://jquerymobile.com/test/docs/toolbars/footer-persist-d.html

[ghost]

ok tx here is the fix http://jsfiddle.net/ca11111/CxFWh/3/

[jaspermdegroot]

@auburtin

Great that it works and thanks for testing! I used your fiddle to test it without data-position="fixed" and that works as well.

[MauriceG]

Hi!
And it works also with two navbars http://jsfiddle.net/MauriceG/Xytg5/

[jaspermdegroot]

Fixed by commit 7ad1e84
Added information to the docs about ui-state-persist