I was putting the finishing touches to a client application over the past couple of days and everything was working great. The solution is ASP.NET MVC 5 based using Razor front end with JQuery.
The solution also involves Ajax post backs at certain points.
In particular I've got a screen that has three drop down boxes. Each drop down once selected triggers an Ajax post back which runs back to the server in order to retrieve the data for the next two drop downs.
On every browser this works fine, until it was noticed that on iPads and iPhones the solution didn't work, or to be precise it worked once then never worked on subsequent selects of the drop downs. So basically the Ajax postback was firing once and that was it.
I looked at various reasons why this maybe the case, and was starting to pull my hair out.
It turns out that I was attaching the event handler for the dropdowns in the $(document).ready function, (which resides in the area of the screen that's marked to be updated after the postback). Nothing wrong with that I'd have thought. But it turns out that Safari only runs the $(document).ready function once on full document load. So in my example it meant that the first time the page loads, the event handlers are attached to the dropdowns and the first ajax call works. But after the area of screen refreshes the dropdowns are redrawn but the handlers don't get attached in Safari because the $(document)ready function only gets called once for the whole document load.
Now in hindsight there maybe a certain amount of logic in why this might be the case, BUT every other browser executes that function on ajax postback (as the function resides in the screen area that's being redrawn) just not Safari.
The solution in the end was straight forward. I just put the drop down attachment handler code into the 'done' handler for the $.ajax call. So basically I had something like:
var request=$.ajax({
...
}
request.done (function(){
$('.dropdownclass'.change(refreshLists);
}
Remember though you still need to have that event attach call in the $(document).ready function also to insure the first call happens.
Hope this helps someone !