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?
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>
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>ASKER
@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!
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!
the right event for checkbox is NOT onclick but onchange
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
There is no reason a 'lost focus'/'some other click' action could fire unless it had been written
ASKER
@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)
ASKER
...and again -- the problem only shows on iPad/iPhone (and/or with mac Safari)
And if you load http://jsfiddle.net/GaryC123/rLQ88/1/ on your iphone does it still happen
Cannot replicate any error in Safari.
Cannot replicate any error in Safari.
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
@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?
ASKER
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!
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!
the onchange version work fine for me on my iPhone
ASKER
@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?
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?
ASKER
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?
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?
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.
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.
ASKER
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? :-)
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? :-)
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
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
ASKER
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?
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?
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/
You are usign JQM 1.3 with jQuery 1.9
The last is : 1.4 and 1.10.2
http://jquerymobile.com/
ASKER
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
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
What version of IOS are you using? 7?
ASKER
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?
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?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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.
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.
Open in new window