Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>onDeviceReady event only works when testing your phonegap application from the device emulator, not in chrome.</p> <p>Here is the best way I have found to do the two frameworks (phonegap and jQuery Mobile) to work together.</p> <p>In my index.html</p> <pre><code> &lt;script type="text/javascript" src="js/libs/LABjs/LAB.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="js/libs/jQuery/jquery-1.9.1.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="js/index.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="js/libs/jQuery/jquery.mobile-1.3.1.js"&gt;&lt;/script&gt; </code></pre> <p>Please notice I use the LABjs Library to load JS scripts (cordova.js is being to be loaded only if we detect that we are in a device), you can find it in google for LABjs library.</p> <p>In my "js/index.js"</p> <pre><code> var deviceReadyDeferred = $.Deferred(); var jqmReadyDeferred = $.Deferred(); var resourcesReady = false; var app = { // Application Constructor initialize: function() { document.addEventListener('deviceready', this.onDeviceReady, false); //load scripts if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/)) { $LAB.script("cordova.js").wait( function(){ document.addEventListener('deviceready', this.onDeviceReady, false); console.log('We are on Device'); } ); }else { console.log('We are on Browser'); var _this = this; setTimeout(function(){ _this.onDeviceReady(); }, 1); } console.log('app.initialize() Called'); $.when(deviceReadyDeferred, jqmReadyDeferred).then(this.doWhenBothFrameworksReady); }, // deviceready Event Handler onDeviceReady: function() { console.log("onDeviceReady"); deviceReadyDeferred.resolve(); }, doWhenBothFrameworksReady: function() { console.log("doWhenBothFrameworksReady"); resourcesReady = true; } }; $(document).one("mobileinit", function () { $.support.cors = true; $.mobile.allowCrossDomainPages = true; $.mobile.phonegapNavigationEnabled = true; console.log('MobileInit'); jqmReadyDeferred.resolve(); }); function PageShowFunction(e) { // we are sure that both frameworks are ready here } function CallPageEvent(funcToCall,e) { if(resourcesReady) { return funcToCall(e); }else { setTimeout(function() { CallPageEvent(funcToCall,e); }, 200); } } $(document).ready(function () { console.log("document ready"); // ALL the jQuery Mobile page events on pages must be attached here otherwise it will be too late // example: // I use the CallPageEvent beacause this event could be called before the device ready /* $("#page").on("pageshow", function(e) { CallPageEvent(PageShowFunction,e); } */ }); app.initialize(); </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload