p2p.wrox.com Forums

p2p.wrox.com Forums (http://p2p.wrox.com/index.php)
-   BOOK: Beginning Building Mobile Application Development in the Cloud (http://p2p.wrox.com/forumdisplay.php?f=658)
-   -   Chapter 3 - Todo list, Enter ToDo Item disappearing (http://p2p.wrox.com/showthread.php?t=85809)

cman123 November 25th, 2011 12:53 PM

Chapter 3 - Todo list, Enter ToDo Item disappearing
 
This example works fine in the browser, however, I found on both iPhone and Android the "Enter To Do Item" keeps disappearing when I first load it - sliding up - so I cannot enter anything. It happened on both, though not consistently, and on both at one point I was able to enter at least one entry.

I am using the file todo.html and todo.js from the downloaded code. Does anyone see what makes this unstable?

Osmu19ier December 22nd, 2011 08:51 PM

Osmund Spier
 
I claimed a video accenting the business allied success of a guy named Andrew Reynolds. I am a teacher and I think I could capture something from it since I am planning to launch a small business in the future.

lordaws January 20th, 2012 03:50 PM

I have duplicated this problem on my iPhone 4S
 
The title explains it all... I use the latest jQuery and jQuery Mobile as follows:

Code:

  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
  <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

and the problem still occurs. Any ideas?

Frodo February 15th, 2012 10:13 PM

Quote:

Originally Posted by lordaws (Post 280585)
The title explains it all... I use the latest jQuery and jQuery Mobile as follows:

Code:

  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
  <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

and the problem still occurs. Any ideas?

I have the same problem. I suspect when the latest and greatest JQ came out it overrode something in a previous version so we now get this behavior. I don't have a previous version of JQ so I cannot test this hypothesis.

r34harbin April 26th, 2012 02:44 PM

Todo list, Enter ToDo Item disappearing
 
I have the same issue.

I have the latest jquery files:
- jquery.js (http://code.jquery.com/jquery-1.7.2.js)
- jquery.mobile.js (http://code.jquery.com/mobile/1.1.0/...obile-1.1.0.js)
- jquery.mobile.css (http://code.jquery.com/mobile/1.1.0/...bile-1.1.0.css)

I also have the downloadable WROX chapter 3 files for the todo app (from http://media.wiley.com/product_ancil...h03-code.zip):
- todo.html
- todo.css
- todo.js

The web server is nginx running in http://192.168.1.35

I am able to successfully hit http://192.168.1.35/todo/todo.html from Safari on my Mac running Lion

When I hit the same URL from my iPhone or iPad, here's what happens:
- the todo.html page loads fine
- I tap "Add"
- The "Cancel" button, "Enter To Do item" line item, and "Save" button appear and immediately disappear. What is also puzzling is that this behavior happens 95%+ of the time when I tap "Add". Twice out of probably 50 times they remain on screen and I can add a new todo item.

Any suggestions on what to look for to identify the root issue?

r34harbin April 26th, 2012 05:48 PM

Todo list, Enter ToDo Item disappearing
 
One more data point.

In order to keep the "Enter To Do item" text box on the display (the 2 out of 50 times referenced above), I have to immediately swipe on the Add/Cancel button after tapping the Add button.

WilliamDoane April 7th, 2013 11:37 PM

Solution
 
The problem is that the JQMobile TAP event responds to/simulates both a touchEnd event (for mobile devices) and a click event (for desktop browsers). This is an attempt to have the same JQM code work whether the user is visiting the site from a mobile or desktop device.

Unfortunately, in the simulator and on many mobile devices, this triggers TWO events at the same X, Y coordinate: first a touchEnd event on the add button is fired; the add button hides itself and shows the cancel button; and then the cancel button receives the click event. (This has been tested and confirmed.) In a desktop browser, only one event is triggered (click), so there's no problem.

More about this "ghost click" problem can be found at https://developers.google.com/mobile...s/fast_buttons.

If you'd like to confirm this for yourself, modify the todo.js code

Code:

  // Note the addition of the evt parameter
  $('#add').tap(function( evt ) {
    $('#main').append(evt.originalEvent.type + " in #add.tap<br>");  // debug
  ...

  // and again, slightly further down...
  $('#cancel').tap(function( evt ) {
      $('#main').append(evt.originalEvent.type + " in #cancel.tap<br>");  // debug
  ...

Then compare loading todo.html in a Safari, mobile Safari, iOS simulator, etc. (you should see the same misbehavior on mobile and simulator devices as before).

I spotted a potential solution at http://forum.jquery.com/topic/tap-fi...-with-live-tap posted by the_new_mr. Their approach is to remember the timestamp of the last event and, if the next event follows too closely in time, ignore it. The proposed inter-event threshold is 800 milliseconds.

At the top of todo.js, add
Code:

var lastTapTime;

function isJqmGhostClick() {
    var threshold = 800; // milliseconds
    var currTapTime = new Date().getTime();
   
    if(lastTapTime == null || currTapTime > (lastTapTime + threshold)) {
        lastTapTime = currTapTime;
        return false;
    }
    else {
        return true;
    }
}


Then, add one line to the beginning of the #add.tap and #cancel.tap event callback functions:

Code:

  $('#add').tap(function() {
    if (isJqmGhostClick()) return;
...

  $('#cancel').tap(function() {
    if (isJqmGhostClick()) return;
...



All times are GMT -4. The time now is 04:43 PM.

Powered by vBulletin®
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.