Forms and jQuery Mobile
Jun 06
A few weeks ago, I was working on a web application that uses jQuery Mobile. This app contained an unusual form that would make an AJAX call to validate the user’s input, grab some data, and display a confirmation message in a div. The web application uses that input later to customize their experience. None of this was a problem until we realized that a user might want to go back and change their information during the same visit.
If you’re a web designer or web developer and have ever worked with jQuery Mobile, you may already know where this is going. When the user returned that form, the AJAX call would fail to update it, even though I could see the request succeeding in Firebug’s network traffic tab. After considerable frustration and a big cup of coffee, I noticed that jQuery Mobile reloaded the page containing the form the second time around, despite the existence of a copy it cached in the DOM only seconds ago! This resulted in two distinct copies of the form trying to use the same ID’s: a sneaky, invisible doppelganger and the visible one. The script was only able to poll and update the hidden one, because it was higher in the DOM, resulting in AJAX calls containing stale data, and useless DOM updates.
Data-ajax decorator to the rescue! Putting data-ajax=”false” on an element such as a form or a link prevents jQuery Mobile from using its caching magic when the user performs an action that would take them to another page, and instead reloads the DOM. In this case, it also banished the doppelganger form, allowing everything to work correctly.