Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Mobile Development > BOOK: Beginning Building Mobile Application Development in the Cloud
Password Reminder
Register
Register | FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
BOOK: Beginning Building Mobile Application Development in the Cloud
This is the forum to discuss the Wrox book Beginning Building Mobile Application Development in the Cloud by Richard Rodger ; ISBN: 978-1-1180-3469-9
Welcome to the p2p.wrox.com Forums.

You are currently viewing the BOOK: Beginning Building Mobile Application Development in the Cloud section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developersí questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Display Modes
  #1 (permalink)  
Old November 25th, 2011, 11:53 AM
Registered User
Points: 8, Level: 1
Points: 8, Level: 1 Points: 8, Level: 1 Points: 8, Level: 1
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Nov 2011
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
Default 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?
Reply With Quote
  #2 (permalink)  
Old December 22nd, 2011, 07:51 PM
Registered User
Points: 3, Level: 1
Points: 3, Level: 1 Points: 3, Level: 1 Points: 3, Level: 1
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Dec 2011
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Default 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.
Reply With Quote
  #3 (permalink)  
Old January 20th, 2012, 02:50 PM
Registered User
Points: 6, Level: 1
Points: 6, Level: 1 Points: 6, Level: 1 Points: 6, Level: 1
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jan 2012
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
Default 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?
Reply With Quote
  #4 (permalink)  
Old February 15th, 2012, 09:13 PM
Authorized User
Points: 98, Level: 1
Points: 98, Level: 1 Points: 98, Level: 1 Points: 98, Level: 1
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Dec 2011
Posts: 23
Thanks: 3
Thanked 0 Times in 0 Posts
Default

Quote:
Originally Posted by lordaws View Post
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.
Reply With Quote
  #5 (permalink)  
Old April 26th, 2012, 02:44 PM
Registered User
Points: 6, Level: 1
Points: 6, Level: 1 Points: 6, Level: 1 Points: 6, Level: 1
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Apr 2012
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
Default 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?
Reply With Quote
  #6 (permalink)  
Old April 26th, 2012, 05:48 PM
Registered User
Points: 6, Level: 1
Points: 6, Level: 1 Points: 6, Level: 1 Points: 6, Level: 1
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Apr 2012
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
Default 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.
Reply With Quote
  #7 (permalink)  
Old April 7th, 2013, 11:37 PM
Registered User
Points: 30, Level: 1
Points: 30, Level: 1 Points: 30, Level: 1 Points: 30, Level: 1
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Apr 2013
Posts: 6
Thanks: 0
Thanked 1 Time in 1 Post
Default 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;
...

Last edited by WilliamDoane; April 8th, 2013 at 12:41 PM. Reason: added code for users to be able to confirm the source of the problem themselves
Reply With Quote
The Following User Says Thank You to WilliamDoane For This Useful Post:
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off

Similar Threads
Thread Thread Starter Forum Replies Last Post
Chapter 4 ToDo List Crash kramey BOOK: Professional Android 2 Application Development 1 November 14th, 2011 11:02 AM
Chapter 7 Todo List tinted BOOK: Professional Android 2 Application Development 2 August 26th, 2010 06:04 PM
Chapter 2 - Todo List error jerrod1225 BOOK: Professional Android Application Development ISBN: 978-0-470-34471-2 1 July 15th, 2010 07:17 PM
Chapter 4 : Todo List Item, can't see text IAmCorbin BOOK: Professional Android 2 Application Development 1 June 29th, 2010 02:56 PM
Chapter 6 Todo List removeItem abowman BOOK: Professional Android Application Development ISBN: 978-0-470-34471-2 4 February 5th, 2010 10:18 AM



All times are GMT -4. The time now is 08:34 AM.


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