jquery/jquery-mobile — Issue #2832: select box onchange/reverse page transition/hash update
Author: jarretttaylor
Created: 2011-10-25 15:31:56+00:00
State: open

This issue applies to Android 4 running in the emulator (as well as Chrome on the desktop). It does NOT appear to be a problem on the iPhone 3G (iOS 4.2.1), the iPhone 4 (iOS 4.3.5), Safari 5.0.5 (desktop), or Firefox 7.0.1 (desktop). In the end, it is probably Google's issue with their browsers, but I will record it here.

Select boxes that have so many entries that cause the jQuery Mobile to generate a dialog box, interrupt form submission (as well as a window.location change) during an onchange event (presumably) because of the reverse transition and hash change. An example is provided via jsfiddle below, but here are the steps to reproduce the scenario:

1. Create a form with ajax disabled for the form.
2. Create a select box in the form that has enough entries to cause a dialog box to be generated.
3. Attach a change even that calls a javascript function (the example just uses an inline onchange attribute).
4. Have the called function look up and submit the form. It is likely a timing issue, so having a small amount of processing (e.g. the form look up) may help to reproduce the issue. When i simply used onchange="this.form.submit()" on the select box I was not able to reproduce the problem. Probably because it happens quickly enough that the reverse transition doesn't take place.

The end result is that the form submission is interrupted by the reverse page transition/hash update and the page never changes to the location specified in the action attribute for the form. Below is a simple example that uses "/" as the action so that the form submission is to the same server/domain.

The example linked below contains two select boxes. The first only contains three entries and does not trigger a dialog page. It is able to submit the form as expected. The second select box has many entries and results in a dialog page. It produces the problem described above. One workaround I have found is to delay the form submission to give the transition/hash change time to happen. For example: setTimeout(submitForm, 500); where "submitForm" represents a simple function to lookup and submit the form.

http://jsfiddle.net/24PaW/5/embedded/result/

The above example failed on the following:

Android 4 emulator:
Mozilla/5.0 (Linux; U; Android 4.0.1; en-us; sdk Build/ICS_MR0) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30

Chrome (Linux):
Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/535.1 (KHTML, like Gecko) Chrome/14.0.835.202 Safari/535.1

Chrome (Windows XP):
Mozilla/5.0 (Windows NT 5.1) AppleWebKit/535.1 (KHTML, like Gecko) Chrome/14.0.835.202 Safari/535.1