Solved

Problem using alert in events in jQuery Mobile on iPhone/iPad

Posted on 2014-01-10
25
2,445 Views
Last Modified: 2014-02-02
The checkbox in the jQueryMobile html below uses an onClick event to display an alert() popup.
Clicking the checkbox puts a mark in it, and displays the alert. All ok, so far.

However, the event handler is also fired when one thereafter "leaves" the checkbox (clicking outside it, to loose focus)
Thus, the alert is displayed then as well. This is wrong.
Also, the checkbox is un-marked. This is really really wrong! :-)

I get this behaviour ONLY on iPhone/iPad (I'm testing with Safari). It works ok on Android and "computer" browsers (well, actually I haven't tried using Safari on other plattforms maybe this is a Safari issue?)

Does anybody know that happens here?


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel=stylesheet href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.css" type="text/css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.js"></script>
<script>
function doclick()
{
  alert('A click');
}
</script>
</head>
<body>
<form>
<div data-role=page id=m_c2main>
<div data-role=content>
  <label><input name=CHECK type=checkbox value=1 onClick="doclick()">A checkbox</label>
</div></div>
</form>
</body>
</html>

Open in new window

0
Comment
Question by:stefanlennerbrant
  • 12
  • 7
  • 6
25 Comments
 
LVL 58

Expert Comment

by:Gary
Comment Utility
function doclick()
{

if($("[name=CHECK]").is(':checked')){
  alert('A click');
}
}

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
Use onchange instead onclick :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel=stylesheet href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.css" type="text/css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.js"></script>
<script>
jQuery(function($) {
    $("#CHECK").change(function() { alert('A click'); })
});
</script>
</head>
<body>
<form>
<div data-role=page id=m_c2main>
<div data-role=content>
  <input name="CHECK" id="CHECK" type="checkbox" value="1" /><label for="CHECK">A checkbox</label>
</div></div>
</form>
</body>
</html>

Open in new window

0
 

Author Comment

by:stefanlennerbrant
Comment Utility
@cathal, well making sure that "checked" is set is of course a method to avoid the alert when leaving focus on the field. On the other hand, it really shouldn't fire any onClick at all - how to avoid this in jQuery?

However the real problem is not the "double onClick" but rather the fact that the checkbox is cleared when leaving focus.
That's a real pain!
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
the right event for checkbox is NOT onclick but onchange
0
 
LVL 58

Expert Comment

by:Gary
Comment Utility
Is that your whole real code above? If not is there a link to the page
There is no reason a 'lost focus'/'some other click' action could fire unless it had been written
0
 

Author Comment

by:stefanlennerbrant
Comment Utility
@leakim971, using onChange results in the exact same behaviour: an extra event when leaving (or what ever happens) the field - and also the checkbox is cleared when clicking outside the field (leaving focus)
0
 
LVL 58

Expert Comment

by:Gary
Comment Utility
Your code
http://jsfiddle.net/GaryC123/rLQ88/1/

No double event happening.
0
 

Author Comment

by:stefanlennerbrant
Comment Utility
...and again -- the problem only shows on iPad/iPhone (and/or with mac Safari)
0
 
LVL 58

Expert Comment

by:Gary
Comment Utility
And if you load http://jsfiddle.net/GaryC123/rLQ88/1/ on your iphone does it still happen
Cannot replicate any error in Safari.
0
 
LVL 58

Expert Comment

by:Gary
Comment Utility
Separate the label from the input and see if it still happens, you may be getting a double click event misfiring because you are technically clicking the label and the input
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
@leakim971, using onChange results in the exact same behaviour: an extra event when leaving (or what ever happens) the field - and also the checkbox is cleared when clicking outside the field (leaving focus)

Did you really tried my whole code, just copy/pasting without any update of your?
0
 

Author Comment

by:stefanlennerbrant
Comment Utility
Sorry @leakim971 and @Cathal, I've been away for a few days.
I really appreciate your input.

However, the problem still persists. The jsfiddle setup also results in incorrect behaviour.
Could you please check out this link:
  http://www.tolva.se/test/ioscheck.htm

It contains links to my code (three versions, using diffrerent means to trigger the event; onclick, onchange and your suggested jQuery change)
All these results in incorrect behaviour on IOS (tested on iPhone and iPad). This is REALLY annoying :-(

Also the page above contains a link to your jsfiddle. It DOES give the same error!
If you click the checkbox to set a mark, and then click "outside" the checkbox (in the same jsfiddle window region) then the "click" is repated, unchecking the box and triggering the event.

As before, only on IOS.

I'd appreciate any feedback on this!
0
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 82

Expert Comment

by:leakim971
Comment Utility
the onchange version work fine for me on my iPhone
0
 

Author Comment

by:stefanlennerbrant
Comment Utility
@leakim971, what ios/browser do you use? I've tried with iPhone4 and iPad3
I really get the error all the time on these.

Also, I get it both with Safari and Chrome (tested in iPad)

Do you mean that you CAN repeat the problem with the onclick version, but it works ok for you with the onchange version? Or did you only test the onchange version?
0
 

Author Comment

by:stefanlennerbrant
Comment Utility
A small addition, is that the "frame" around the checkbox+text is "darkened" a little when I click to check the checkbox.
This darkening does not happen on Android or desktop computers.

Do you get such a darkened background on the checkbox field?
And again; do you get it to work on all four versions of the test?
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
iPhone 3
the alert isa native JS function, every browser depending the OS do what he want and as it is native you CAN'T change it but we are off topic now.
0
 

Author Comment

by:stefanlennerbrant
Comment Utility
That's true, but triggering an "extra click", changing the "checked" status on the field - that's plain wrong :-)

It obvisouly has something with the alert(), or confirm(), to do - but I'd say that there must be possible to display an alert/confirm in the event handled for a checkbox onClick/onChange, right?

So the issue is -- what the heck is the problem with the jQueryMobile/IOS combination, when using alert/confirm() in the onClick event handler? :-)
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
I think you've a cde somewhere doing this extra click, I can't understand why I did not get it on my phone and you get it

if you really have this with the onchange demo, it's not about javascript but about your phone, just try it on someone else phone
0
 

Author Comment

by:stefanlennerbrant
Comment Utility
I'm using exactly the samples available at
  www.tolva.se/test/ioscheck.htm

No extra code anywhere, WYSIWYG :-)

And it does not work on iPhone4 and iPad3.
According to you it works on iPhone3 (right?) and I have received some info that it may work OK on iPhone5.

But iPhone4 and iPad3 is "bad enough". And it's not only me, we've tried with several different mobiles and devices.

Is there anyone using iPhone4 that can reproduce the error? Or when using iPad?
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
Did you tried the latest jQuery mobile ?
You are usign JQM 1.3 with jQuery 1.9
The last is : 1.4 and 1.10.2

http://jquerymobile.com/
0
 

Author Comment

by:stefanlennerbrant
Comment Utility
The problem exists with 1.4.2 and 1.10.2 as well.

I now added that setup as a separate test in
  http://www.tolva.se/test/ioscheck.htm

Isn't there anybody that can repeat this problem?
Are there anyone that uses iPhone4 (or iPad3), that could test it?

/Stefan
0
 
LVL 58

Expert Comment

by:Gary
Comment Utility
What version of IOS are you using? 7?
0
 

Author Comment

by:stefanlennerbrant
Comment Utility
Now I tested iPhone5 myself (iOS 7.02) and the problem exists there as well (with all five test links on my test page)

With iPhone4 I tested with IOS 7.0.4
And with iPad3 I tested with IOS 6

But @x you tested with iPhone3 right? And it worked ok for you?

does anybody test with non-iphone3?
0
 

Accepted Solution

by:
stefanlennerbrant earned 0 total points
Comment Utility
Ok, I experimented during the weekend and the problem seems to boil down to that the touchstart/touchend events do not behave properly on IOS, when a alert/confirm is executed during an event.
The touchend event does not fire, due the popup, but is instead subsequently fired the next time the user taps on the screen. Then the onclick event is executed once again, and also jQueryMobile once again toggles the checkbox mark.
This only happens on IOS, not on other platforms.

Ok, the solution is either to detect "the second click" and ignore it, or to prevent the delayed touchend completely.

Detecting the second click may be done by, for example, tracking the X/Y position where the event was triggered (assuming, of course, that a user does not really click on the *exact* same position twice, in "normal operation")
A little hacky, but easily implemented.

Preventing the delayed touchend seems to be possible to do, by letting the event handled yield to the platform for a short time.
Like having a event handler like this:
  function doclick() {
    setTimeout('doclick_2();', 5);
  }
  function doclick_2() {
    alert('A click');
  }

This seems to work ok. One needs to change all event handlers, of course, splitting them into two functions. A little cumbersome, but still possible.


I updated by sample page
  http://www.tolva.se/test/ioscheck.htm
with this solution. Please feel free to test it - does it solve the problem in your clients, as it does for all my clients?

This seems to be the solution to go for!
Any downsides, anyone?
0
 

Author Closing Comment

by:stefanlennerbrant
Comment Utility
I'd say it's clear that IOS devices do have a problem with alert() within onclick/onchange event handlers, as described here.
Note that the behaviour is a little instable, sometimes one may "get it to work ok" once or twice, depending on how one clicks, but eventuelly one always gets into a situation when the error displays.

Yielding to the platform with setTimeout() in the event handler however seems to solve the problem.
Of course this is a little cumbersome when arguments are to be passed to the event handler, one may need to build a framework with global variables etc, but still it is possible to work around the IOS bug.

So, I'd say that setTimeout is a good enough solution to this question.
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now