Question

I have some jquery-scripts which I want to put into a plugin.

In my current setup the code is executed at “mobileinit” with my custom.js file sitting between Jquery.js and Jquery Mobile.js files.

This is what I’m doing:

(function($ , window, undefined) {
$( window.document ).bind('mobileinit', function(){
          alert ("init");
 });     
})(jQuery,window);

I would like to make this into a plugin using the Jquery Widget factory as recommended by JQM-developers

Currently I’m stuck with the following:

(function( $, window, undefined ){
   $.widget( "myPlugin", $.mobile.widget, {
        options: { },
        _create: function() {$.fn.myPlugin = function() {       
          alert ("init");          
           };
   $( window.document ).bind('mobileinit', function(){ {
     myPlugin();
     });
})( jQuery, window );

which does not work… if I put the plugin.js before JQM.js “mobile isn’t defined”. If I put it afterwards, nothing happens.

My question:
How can make a widget which runs on mobileinit, that is before Jquery Mobile.js is running.

Thanks for help!

Answer 1

Ok. Here is a roundup of possibilities – you can do either of the following:

1. bind to JqueryMobile pagecreate event (see here):
   This fires after elements have been enhanced, but before the page is shown

2. bind to JqueryMobile pageinit event (same link):
   This way you can make changes to the JQM widgets before they enhance elements on a page. This should be the equivalent to $(document).ready()

However, if you want to change JQM core itself, you need to bind to earlier events.

1. bind to JqueryMobile mobileinit event (same link):
   You can only override Jquery Mobile stuff set (itself set at mobileinit) by putting your plugin file BEFORE Jquery-Mobile.js. However this way you can no longer use the widget factory structure recommended by Jquery Mobile, because it requires Jquery-Mobile.js to run first.

I’m currently checking to see if I can bind to DOMContentLoaded, too. Maybe this is another solution