Custom select menu - Change event triggers before the dialog has closed
All,
When using 'Custom Select Menus' that display on a separate dialog page, we have a problem with change events being triggered too soon, before the dialog has closed. This is causing issues for us because we have code that relies on the calling page being the active page, when this event triggers.
I'll try and explain the issue. Our framework allows developers to build mobile applications, which is powered by jQuery Mobile behind the scenes. We have a specific situation within the framework that allows developers to define on change behaviour on a select list, and where the page will submit automatically once the select change event triggers. When this select list is a JQM custom select list that displays in the dialog, this is causing issues because the page submission code relies on the calling page being the active page. I will try and explain why, with the following overview of what happens:
- During page load, we set a 'page context' variable, gPageContext$. This is used to help us isolate the specific JQM page that is the current active page, which we then use throughout our code-base to ensure we're running our jQuery selectors in the right context. One place in our code, which is of significance to this issue, is when submitting forms via JavaScript, where we use the gPageContext$ value to ensure we're submitting the right form. We set this context with something like the following code, which on the whole has worked fine for us:
jQuery( document ).on( "pagebeforecreate pageshow", function( pEvent ) {
gPageContext$ = jQuery( pEvent.target );
} );
- So the page loads and it contains a select list with 'data-native-menu="false"', so will load a custom select menu. The user opens the select menu and the dialog page opens with the list of values.
- gPageContext$ is set to the dialog, by virtue of the 'pageshow' event firing when the dialog opens.
- User selects a value in the dialog.
- Change event fires immediately, before the dialog closes and obviously before the 'pageshow' event fires (which would be the one we could utilise to set our 'page context' back to the active page). This results in our page submission code executing, which then fails because gPageContext$ is still set to the dialog, not the calling page.
We are investigating ways to get around this, but I wanted to ask if others thought the fact that the 'change' event fires first before the dialog closes is correct, or whether that should indeed fire when the dialog has closed, and the calling page is back to the active page again?