All buttons regardless of markup should get active state

[kvedananda]

When I click a button like this

<a data-role="button" href="#page2">Page 2</a>

it works fine.

However this

<button id="test">Test</button>

does not work. It fires the tap event but does not change css to the tapped state and then back to normal.

It appears that only buttons that are either linked to another page or buttons that submit forms will properly relay feedback to the user. I want to have a button on a page that handles a request for me without going anywhere. The tap event does work but the user gets no feedback that something has happened.

[jaspermdegroot]

@kvedananda - This is indeed something we want to improve. See the thread of #4469 for work arounds.

@toddparker - Is applying the active state to all buttons, regardless of markup, something we can add for 1.3?

[toddparker]

Absolutely. We've been adding active state feedback wherever we can to improve perceived responsiveness. We just need to make sure to pull this class after a brief delay to ensure they are cleaned up.

[kvedananda]

Great thanks guys. Setting the href to javascript:void(0) as described in #4469 works for now.

[jaspermdegroot]

@kvedananda

Closing this as feature request and I added a link to this ticket here https://github.com/jquery/jquery-mobile/wiki/Feature-Requests

[jaspermdegroot]

Oops. Since this will be for 1.3 I better leave it open.

[jaspermdegroot]

I changed the topic of this ticket (was: "Unlinked buttons don't display click/tap animation").

Things to look into:

• collapsibles should get active state as well: see request add active-state on clicked collapsibles or fade out ui-focus in collapsible-sets #4864
• list items should only get the active state if they have an anchor, but not only if that anchor has a href attribute
• selects (native and custom): there seems to be some inconsistency in when a select button get the focus style and active state
• issues about the active state not being removed: navbar link stays active when using changePage() #1181 and Popup: Calling LI don't lose ui-btn-active #4611 (see also my comment on PR Fixes: #1181 - navbar link stays active when using changePage() #4579)

Update:

• links with data-ajax="false" should get active state too

[jaspermdegroot]

Related PR: #5145

[gabrielschulhof]

The problem is that we only add the active class to buttons for which we know that clicking on them will not result in the current instance of jQM being scrapped. That is, we only do the logic for buttons that result in navigation that's done internally.

The reason for this is that we cannot remove the active class off buttons that, when clicked, lead to a page accessed over HTTP, because the request causes the whole browser state to be scrapped, including our logic to remove the active class upon the next button click. So, if the user were then to hit "Back", she would be taken back to the page where the button still has the active state applied. Not only that, but, if she were to click on yet another button on that page, which also leads to a HTTP request, that button would also have the active state upon her return. This would basically result in visual artifacts.

[jerone]

@gabrielschulhof can't the buttons state be reset on unload?