Optional sidebar menu
Social media
Contact information
Address

September 2017: Change of address in progress.

Email

info@sulware.com

Phone

+353 87 2446653

Sulware Blog


Safari browser and Ajax load issue

08/06/2017 Posted by Brendan O'Sullivan | Comments(0)

Key Areas:

Ajax, ASP.NET, Business Development, C#, JQuery, Software Development, Web Design, Web Development
Safari browser and Ajax load issue

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 !  

About the Author

Brendan O'Sullivan

Brendan O'Sullivan is a computer science graduate of DIT and has been working professionally as a software/web developer, Systems Architect and IT consultant since 1993. After spending 3 years with IBM, he went on to found Sulware in 1996. He has worked with a vast array of companies from large multi nationals to small family run businesses. Brendan also holds technical directorships with a number of other Irish based companies.

Add a Comment


Name:
Email:
Website:
Notify of New Replies:
Add a new comment:

Latest Posts

Chapters

Topics

Latest Comments

Archives