possible conflict with Jquery Mobile "mobileinit" event

[frequent]

I'm struggling to get requireJs and Jquery Mobile to play along on my iPad (strangely desktop works fine) AND not sure if this is an issue at all:

I think the problem is related to Jquery Mobile being triggered way before doc.ready() is fired (pageinit event info here and/or mobileinit event info here ), while require uses doc.ready() (?)

My setup is like this:
a) Jquery
b) Jquery Mobile (depend Jquery)
c) Jquery Multiview (depend Jquery & Jquery Mobile )

My main.js:

 var IS_LOCAL  = /(:\/\/localhost|file:\/\/)/.test(document.location.href),
       IS_DEEP = /members/.test(document.location),

 requirejs.config({
        waitSeconds : (IS_LOCAL? 2 : 45)
      , baseUrl: (IS_DEEP? "../js" : "js/")
      , paths: { 
             app:  'app'
           , overrides:  'overrides'
           , jquery:  'libs/jquery/jquery.min'
           , jqm:  'libs/jquery-mobile/jquery-mobile.min'
           , multiview:  'services/multiview/multiview.min'
           }
     , shim: {
                   'overrides': { deps: ['jquery'] }
                ,  'jqm':    { deps: ['jquery'], exports: 'mobile' }
                ,  'multiview':  { deps: ['jquery', 'jqm'], exports: 'multiview' }
                ...         
                          }
                     });

requirejs([
                  'overrides'
                , 'jquery'
                , 'jqm'
                , 'multiview'
                , 'app'
                 ], function($, overrides, mobile, multiview, respond, App){
                     App.start();
                });

My problem is, Jquery Mobile is initializing the page way before multiview has finished loading. Therefore the Jquery Mobile inital page events have all fired by the time multiview is done loading and starts listening for these events. So my page on iPad stays blank.

I'm not sure if above setup is correct, but I think it is. Still I have no way of telling "Jquery Mobile, please only start AFTER multiview has loaded".

I'm trying to fix this by using overrides.js to stop Jquery Mobile from automatically initializing. After a few hours of testing this seems to be the only way to get an alert to fire before JQM triggers initialization on iPad. Like I said, on desktop I don't have any problems.

So my issue would be a sort-of feature request for an async plugin trigger along side async js loading. Something like this:

    , shim: {
                   'overrides':     { deps: ['jquery'] }
                ,  'jqm':               { deps: ['jquery'], exports: 'mobile', trig: 'multiview' }
                ,  'multiview':     { deps: ['jquery', 'jqm'], exports: 'multiview' }

Which tells JQM to only trigger once multiview has been loaded. Not sure if this is a circular reference though...

Any other thoughts on my issue are also appreciated :-)

Thanks!

[jrburke]

Does this thread answer the question?

https://groups.google.com/forum/?fromgroups#!searchin/requirejs/jquery$20mobile|sort:date/requirejs/8tKeU_u9Xr0/5r6cUQrdxZoJ

[frequent]

Yes. Thank you very much.

I created a sort-of workaround with an overrides.js, which I'm now pulling in first. Inside I'm disabling Jquery Mobile initialization by setting:

 $(document).bind("mobileinit", function(){
$.mobile.autoInitializePage = false;    
})

And adding a custom event in the last plugin that depends on JQM (since it's my plugin, I can add easily :-). I'm listening for this event in my app.js controller and let JQM run from there. There still some weird things happening (one JQM widget not getting enhanced), but I'm not getting any critical errors anymore, so I'm fine until JQM 1.1.1. comes out.

Thanks for the quick help!