No visual feedback given when pressing a button/stylished link

[janimattiellonen]

If an element stylished as a button has href="#" then tapping the button yields no visual feedback to the user, even if the tap was registered. In my app I use javascript to render html views and the lack of visual feedback degrades user experience quite a lot.

I can reproduce this on my iPhone 4.

Is this expected behaviour?

I'm using jquerymobile 1.1.0 and jquery 1.7.1.

The following code generates visual feedback when I tap the button on my iPhone 4:

<a id="foo" data-role="button" href="javascript:void(0)">Test</a>

<script type="text/javascript">
        $('#foo').bind('click', function()
        {
                $(this).button('refresh'); 
                return true;
        });                                    
</script>                                                              

[jaspermdegroot]

hi @janimattiellonen

In general buttons with href="#" get the hover and down style, so there must be something else in play.
Can you create a simple test page that illustrates the issue? Here is a template http://jsbin.com/otepum/edit#html

[janimattiellonen]

Sure, here is an example. Please note that the "bug" happens when using an iPhone (and afaik, on other mobile devices too). I had no issues with Firefox for OS X.

http://jsbin.com/otepum/41

[agcolom]

@janimattiellonen Thanks a lot for the test page.
@uGoMobi The problem is that the second button is not getting the ui-btn-active class. I am not sure why.

[jaspermdegroot]

@janimattiellonen

At first I thought you meant the button didn't get the "down" state (dark gray in your example) on iPhone 4 but @agcolom tested this and that is not an issue. So I suppose with "visual feedback" you mean the "active state" (blue in your example).

The button gets the active state when there is an action in progress. In your example the first button contains a function, which means there is an action and the button gets the active state. With the second button there is no action so also no active state. This is expected behaviour, yes.

What I still don't understand is what difference you see between FF and iPhone4. Maybe you can clarify this. Thanks!

[agcolom]

@uGoMobi oops sorry, no on the iPod Touch the button doesn't get the down effect either... sorry

[janimattiellonen]

See http://jsbin.com/otepum/80

When pressing the bottom button quickly (tapping) on an iPhone 4, a random value is rendered in the dedicated

(as a visual indicator that an event is actually triggered). However, the button gives no visual feedback to the user that it was actually pressed/tapped.

When tapping the upper button, the button's background color is changed for a moment to blue and then back to the original color. THIS IS what I want to happen for the bottom button. In my web app I mainly deal with button events using javascript and AJAX and I do not want clicking of certain buttons to cause a page load.

I guess I could use javascript:void(0) instead of # as the value for the href attribute. Allthough it looks bad ;)

(Hmm, apparently I don't have to call $(this).button('refresh'); which I first was certain I had to)

[jaspermdegroot]

@janimattiellonen

I now understand, after the update from @agcolom, that you don't see the "down state" either. This has to do with buttonMarkup.hoverDelay. You can read more about this on this page in the docs http://jquerymobile.com/test/docs/api/globalconfig.html
You can configure this setting by adding the code shown below in the head before you load the jQuery Mobile JS. See http://jsbin.com/ovesir/2/edit

       <script>
          $(document).bind("mobileinit", function(){
            $.mobile.buttonMarkup.hoverDelay = 100;
          });
        </script>

Default is 200 and I changed it to 100, but you can play with it to see what works best.

Regarding the active state. You could still use href="#" but then you need to make your function add and remove the active class.

$(this).addClass("ui-btn-active");

As an alternative you could change the styling of the down state to make that look like the active state.

Buttons with href="#" don't get active state by design, this is not a bug. Maybe we have to give the default value for hoverDelay another look. Closing for now, but feel free to comment if the suggestions above doesn't solve your issue.

[janimatti]

Thanks for your replies and the offered solution. I will try it out later.

[jaspermdegroot]

@janimatti

You are welcome. BTW - We are considering to make changes so buttons always show active state when pressed to improve the visual feedback. Stay tuned!

[janimatti]

Forgot to reply. When using

$.mobile.buttonMarkup.hoverDelay = 100;

it started to work better. Thanks.

[pavanshirguppi]

Let me share this neither of them worked for me. Need your thoughts on this.
What I tried ..?

1. $(document).bind("mobileinit", function(){
   $.mobile.buttonMarkup.hoverDelay = 100;
   });
2. $('#WoBackbutton').bind('click', function(){
   $(this).button('refresh');
   return true;
   });

Its just that the button doesnt show the active state. This is my button.

anchor tag href="#" data-transition="none" id="WoBackbutton" data-icon="back" onclick="WorkOrder.updateBackData()" class="ui-btn-left">Back</a

Using jquery mobile 1.4.5 on android 4.1.2.
Guess what on 4.4.4 version the same above button -active state works sometimes. very rare one in like 10 clicks. but on 4.1.2 version it doesnt work at all. Kindly let me know anything else i need to modify.