iOS 7 onchange event is broken in iPad 3+Mini // Need work around

Please test this only on iPad running ios 7

It appears that iOS 7 doesn't support alert() and confirm() for onchange events on iPad. Strange thing is that it works on iPhone 4s running ios 7.0 and in desktop browser but not on ipad 3 or ipad mini running ios 7.0. It fires the dialog and when clicked it darkens the button (as if it was clicked) and then the browser freezes. Happens in both Safari and chrome running on iOS 7 iPad and iPad mini.

Any pointers would be greatly appreciated. Already tried onblur and onkeypress with no success :-/

Options
<select id="iCard" onchange="alert('It worked.')">
    <option value="0" selected="selected">(none)</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
</select>

Open in new window


Issue can be seen here (make sure to test it on iPad running iOS 7): http://jsfiddle.net/sethsanders/MvSxm/
SethSandersAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Michel PlungjanIT ExpertCommented:
Can you try

<select id="iCard" onchange="document.getElementById('msg').innerHTML='It worked.';">
    <option value="0" selected="selected">(none)</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
</select>
<span id="msg"></span>

Open in new window


instead?
0
Kim WalkerWeb Programmer/TechnicianCommented:
The standards compliant method would be to tell it what script engine to use and end with a semi-colon. Maybe the iPad is picky.
Options
<select id="iCard" onchange="javascript: alert('It worked.');">
    <option value="0" selected="selected">(none)</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
</select>

Open in new window

0
Michel PlungjanIT ExpertCommented:
No way. The semicolon is only EVER needed in event handlers to SEPARATE statements
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Kim WalkerWeb Programmer/TechnicianCommented:
One more thing that might help a picky browser would be to return true at the end.
Options
<select id="iCard" onchange="javascript: alert('It worked.');return true;">
    <option value="0" selected="selected">(none)</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
</select>

Open in new window

0
Michel PlungjanIT ExpertCommented:
@xmediaman Are you guessing here?

1) javascript: pseudo protocol/label is ONLY EVER needed in IE if there is a VBScript at the top of the page
2) return true is only needed in a very few handlers, the only ones I can think of is onmouseover/out when you change the status line (no longer allowed in most browsers) and in any handler that returns EITHER true OR false such as a submit handler with a validation.
0
Kim WalkerWeb Programmer/TechnicianCommented:
Absolutely. Obviously iOS7 on the iPad 3 isn't behaving normally so I'm making suggestions that might work. I don't have anything to test on. After all, who'd of ever thought that adding and empty onclick attribute on a label tag would overcome previous iOS issues. But it works.
0
Michel PlungjanIT ExpertCommented:
Perhaps it is because your fiddle is running onload, which creates this code where the function is not in the window scope


<script type='text/javascript'>
window.onload=function(){
function SetCard(cVal, cTxt) {
    alert('SetCard called successfully.')
}
</script>

Open in new window


Please try this version where I load the function in the head instead

JSFiddle

I will test on iPad 3 iOS7 in a few hours - it works on my 4S iOs7
0
SethSandersAuthor Commented:
I tested all of the above possible solutions and none of them have worked so far :-/

@mplungjan: My original fiddle code ran no problem on my 4s running iOS7 as well. This is really baffling.
0
Michel PlungjanIT ExpertCommented:
I can confirm this case with iPad 3 iOs7
I raised bug #15067555 with apple.
0
Michel PlungjanIT ExpertCommented:
Workaround here

http://jsfiddle.net/mplungjan/eqffs/

It is very IE7 to need a setTimeout to handle a stuck event handler

function SetCard(sel) {
   setTimeout(function() { alert('SetCard called successfully.');},10);
    document.getElementById("msg").innerHTML=sel.value + ":" + sel.options[sel.selectedIndex].text;
}

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
SethSandersAuthor Commented:
Thanks mplungjan! That works!
0
Michel PlungjanIT ExpertCommented:
Thanks a LOT Apple!

Apple Developer Relations22-Oct-2013 01:43 AM

Engineering has determined that your bug report is a duplicate of another issue and will be closed.

---

but I cannot see the closed issue
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Apple OS

From novice to tech pro — start learning today.