I'm having a serious problem with AJAX in my web application that has our entire development team banging their head against the keyboard.
(Unfortunately, all that banging hasn't yielded a good answer, so I'm hoping one of the experts here have a possible solution!)
The core question is this:
How can I make sure ajax calls to the server have completed?
The problem we're having is that we have a page with a bunch of AJAX calls. The calls work perfectly and the page works well. The issue is that when we submit the form on the page, we get very inconsistent results. Sometimes everything works as expected and we're directed to the correct page. Other times, it seems like the AJAX calls are still running and when the form is submitted it literally kicks us out of the application.
We tried to increment a counter when we start an ajax call and decrementing it when the ajax call finishes and then only submitting the form if that counter is zero, but that sadly did not work.
Does anyone have any other ideas?
We're also open to using jQuery if that holds the answer.
Any and all help is greatly appreciated. And, if you help and you're ever in the Toronto area, I owe you a bunch of drinks! =)