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.


/*
* 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');
Choose*:
Choose*: