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

5 posts, 1 answers
  1. Rihan
    Rihan avatar
    2 posts
    Member since:
    Jan 2013

    Posted 28 Jan 2013 Link to this post

    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
  2. Answer
    Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 29 Jan 2013 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 29 Jan 2013 Link to this post

    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!
  5. Oleksandr
    Oleksandr avatar
    1 posts
    Member since:
    Feb 2013

    Posted 08 Feb 2013 Link to this post

    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.
  6. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 12 Feb 2013 Link to this post

    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!
Back to Top
Kendo UI is VS 2017 Ready