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

Closed
DreifGenov opened this Issue Sep 11, 2011 · 15 comments

Comments

Projects
None yet
5 participants
@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

This comment has been minimized.

Show comment Hide comment
@toddparker

toddparker Feb 15, 2012

Contributor

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

Contributor

toddparker commented Feb 15, 2012

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

This comment has been minimized.

Show comment Hide comment
@maxpaynestory

maxpaynestory Feb 23, 2012

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.

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

This comment has been minimized.

Show comment Hide comment
@toddparker

toddparker Feb 24, 2012

Contributor

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

Contributor

toddparker commented Feb 24, 2012

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

@maxpaynestory

This comment has been minimized.

Show comment Hide comment
@maxpaynestory

maxpaynestory Feb 24, 2012

@ghost

This comment has been minimized.

Show comment Hide comment
@ghost

ghost May 17, 2012

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

ghost commented May 17, 2012

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

This comment has been minimized.

Show comment Hide comment
@jaspermdegroot

jaspermdegroot May 18, 2012

Member

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 ?

Member

jaspermdegroot commented May 18, 2012

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

This comment has been minimized.

Show comment Hide comment
@ghost

ghost May 18, 2012

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

ghost commented May 18, 2012

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

This comment has been minimized.

Show comment Hide comment
@jaspermdegroot

jaspermdegroot May 18, 2012

Member

@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 :-)

Member

jaspermdegroot commented May 18, 2012

@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

This comment has been minimized.

Show comment Hide comment
@ghost

ghost May 18, 2012

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

ghost commented May 18, 2012

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

@jaspermdegroot

This comment has been minimized.

Show comment Hide comment
@jaspermdegroot

jaspermdegroot May 18, 2012

Member

@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?

Member

jaspermdegroot commented May 18, 2012

@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

This comment has been minimized.

Show comment Hide comment
@jaspermdegroot

jaspermdegroot May 18, 2012

Member

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

Member

jaspermdegroot commented May 18, 2012

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

@ghost

This comment has been minimized.

Show comment Hide comment
@ghost

ghost May 18, 2012

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

ghost commented May 18, 2012

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

@jaspermdegroot

This comment has been minimized.

Show comment Hide comment
@jaspermdegroot

jaspermdegroot May 18, 2012

Member

@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.

Member

jaspermdegroot commented May 18, 2012

@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

This comment has been minimized.

Show comment Hide comment
@MauriceG

MauriceG May 19, 2012

Contributor

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

Contributor

MauriceG commented May 19, 2012

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

@jaspermdegroot

This comment has been minimized.

Show comment Hide comment
@jaspermdegroot

jaspermdegroot May 27, 2012

Member

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

Member

jaspermdegroot commented May 27, 2012

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment