This is a migrated thread and some comments may be shown as answers.

Button click(touch) only works after several times on devices

4 Answers 365 Views
Button (Mobile)
This is a migrated thread and some comments may be shown as answers.
Rihan
Top achievements
Rank 1
Rihan asked on 28 Jan 2013, 08:33 AM
Hi

I have created a view with 3 data bound controls to a view.  On click (or touch if it is on a device) I am expecting the view to change.  This works great if I test it on my desktop browser.  However when I try it from a physical device it seems problematic.  It takes several touches before it actual seems to fire.  This happens on Ipad, Android 4.2, and Iphone.  I expect I am doing something wrong, however I cant find the problem.

Please have a look at the JSfiddle http://jsfiddle.net/rihanmeij/ULtkP/ that I created here that has all the important bits of code.  The button also does not work on JSFiddle, but it works when I run it from my local web server and a local browser.

What is the order that Javascript elements needs to run in?  First your View model, then your binding, and then at the very end you load up the mobile.Application?

Thanks 
Rihan Meij

4 Answers, 1 is accepted

Sort by
0
Accepted
Alexander Valchev
Telerik team
answered on 29 Jan 2013, 02:10 PM
Hello Rihan,

Using the DOM/jQuery click event is not recommended in mobile application. Instead please consider working with the build-in click event of the corresponding widgets. In your particular case I recommend you to initialize a button widget:
<a id="loginButton" data-role="button" data-bind="click: Login">Login</a>


What is the order that Javascript elements needs to run in?
  1. Initialize the mobile application (not in document ready event).
  2. Bind the View through the model property (data-model)

Also in case you want to cancel the show action of View you may use the beforeShow event. Alternatively you may set the initial mobile View to display in this way.

Kind regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Alexander Valchev
Telerik team
answered on 29 Jan 2013, 02:14 PM
Hello Rihan,

I forgot to provide a link to the updated jsFiddle example: http://jsfiddle.net/valchev/ULtkP/20/

Kind regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Oleksandr
Top achievements
Rank 1
answered on 08 Feb 2013, 10:32 AM
Hi,

it doesn't work on real devices.

I've tried it ( even provided fiddler example) on iPad and iPad mini - no luck. 
It's simple feature and definitely should work properly especially for mobile application.

Thanks,
Sasha.
0
Alexander Valchev
Telerik team
answered on 12 Feb 2013, 08:57 AM
Hello Oleksandr,

Thank you for the feedback.

My previous example is incorrect for which I apologize. The problem comes from the fact, that when the button's <a> tag is a direct child of the ListView's item it's data-role gets changed from "button" to "listview-link". As a result the element is not transformed into a button widget but to a link item.

The solution:
  • if you want to keep the application layout as it is at the moment, you may bind to the click event of the ListView. In this case the event will fire when any of the items is clicked, so it is necessary to check which is the item.
    <ul data-role="listview" data-style="inset" data-bind="events: { click: Login }">
        ....
    </ul>
     
    Login: function (e) {
        if(e.item.is(":last-child")) { //if last item was clicked
            app.navigate("#LandingPage");
        }
    }

    Example: http://jsfiddle.net/valchev/ULtkP/22/

  • alternatively you may wrap the button element inside a span tag (so it will be rendered as button).
    <li>
        <span><a id="loginButton" data-role="button" data-bind="events: { click: Login }">Login</a></span>
    </li

    Example: http://jsfiddle.net/valchev/ULtkP/23/


Regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Button (Mobile)
Asked by
Rihan
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Oleksandr
Top achievements
Rank 1
Share this question
or