• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2798
  • Last Modified:

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

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
Stefan Lennerbrant
Asked:
Stefan Lennerbrant
  • 12
  • 7
  • 6
1 Solution
 
GaryCommented:
function doclick()
{

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

Open in new window

0
 
leakim971PluritechnicianCommented:
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
 
Stefan LennerbrantAuthor Commented:
@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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
leakim971PluritechnicianCommented:
the right event for checkbox is NOT onclick but onchange
0
 
GaryCommented:
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
 
Stefan LennerbrantAuthor Commented:
@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
 
GaryCommented:
Your code
http://jsfiddle.net/GaryC123/rLQ88/1/

No double event happening.
0
 
Stefan LennerbrantAuthor Commented:
...and again -- the problem only shows on iPad/iPhone (and/or with mac Safari)
0
 
GaryCommented:
And if you load http://jsfiddle.net/GaryC123/rLQ88/1/ on your iphone does it still happen
Cannot replicate any error in Safari.
0
 
GaryCommented:
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
 
leakim971PluritechnicianCommented:
@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
 
Stefan LennerbrantAuthor Commented:
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
 
leakim971PluritechnicianCommented:
the onchange version work fine for me on my iPhone
0
 
Stefan LennerbrantAuthor Commented:
@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
 
Stefan LennerbrantAuthor Commented:
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
 
leakim971PluritechnicianCommented:
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
 
Stefan LennerbrantAuthor Commented:
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
 
leakim971PluritechnicianCommented:
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
 
Stefan LennerbrantAuthor Commented:
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
 
leakim971PluritechnicianCommented:
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
 
Stefan LennerbrantAuthor Commented:
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
 
GaryCommented:
What version of IOS are you using? 7?
0
 
Stefan LennerbrantAuthor Commented:
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
 
Stefan LennerbrantAuthor Commented:
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
 
Stefan LennerbrantAuthor Commented:
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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 12
  • 7
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now