jQuery mobile and Webshims

Webshims and jQuery mobile do a lot of tricks with form elements, which can conflict with each other. This page demonstrates how both libraries can be combined. Please read the source code and watch out for comments marked with JQM:.

The easiest way to get both libraries work friendly side by side is to make sure, that jQM enhances all form elements before webshims does.

• This is done by setting webshim.setOptions('waitReady', false); and calling webshim.polyfill after jQM was included.
• JQM has the concept of pages while webshims normally works on the hole document. To make sure webshims is updating only the active page (only needed in case of multiple pages inside a document), the wsdoc option should be set to the active page
• JQM dynamically loads new content and creates new pages, the wsdoc has to change on pageinit and updatePolyfill has to be called on this [new] page element

/*
* JQM specific configuration of webshim:
*/
//JQM: set waitReady to false
webshim.setOptions('waitReady', false);

//jQM: set wsdoc to active page or false
webshim.setOptions('wsdoc', $('.ui-page-active').updatePolyfill().get(0) || false);

//JQM: set ready event to pageinit
webshim.setOptions('readyEvt', 'pageinit');

//jQM: update polyfills on pageinit and change active page
$(document).on('pageinit', function(e){
	webshim.setOptions('wsdoc', e.target);
	$(e.target).updatePolyfill();
});

//load all polyfill features
//or load only a specific feature with webshim.polyfill('feature-name');
webshim.polyfill('forms forms-ext');

email*:

date*:

time*:

month*:

number

Value

Choose*: Choose Option 1 Option 2 Option 3 Option 4

Choose*: Choose Option 1 Option 2 Option 3 Option 4

Choose*:

Option Option Option

Choose*:

Option