All geek questions in one place

Phonegap function not calling device

I can’t get the device’s readiness function to work on the phone, i.e. xcode simulator. The html is as follows: `

<title>Boilerplate</title> </head> <body> <div id="main" data-role="page"> <div data-role="header" class="logo"> <img class="logo" src="img/premium-logo.jpg" /> </div> <div data-role="content"> <h1>Apache Cordova Test Zone</h1> <div class="test-zone" id="test-zone"> </div> </div> <div data-role="footer"> <h4>Footer of main page</h4> </div> </div> <script type="text/javascript" src="js/jquery-2.0.3.min.js"></script> <script type="text/javascript" src="js/jQuery-Mobile-1.3.1-min.js"></script> <script type="text/javascript" src="cordova-2.3.0.js"></script> <script type="text/javascript" src="js/index.js"></script> <script type="text/javascript"> $(document).ready(init()); </script> </body>

Javascript index.js file:

  function init() { document.addEventListener("deviceready", onDeviceReady, false); } function onDeviceReady() { alert('It works!'); }

If I comment out the line inside the init function and replace it simply with onDeviceReady (); I can get a warning to work on chrome.

Why it will not work in the simulator with the code above. thank you

+4
source share
3 answers

The onDeviceReady event only works when checking your application for a phone call from a device emulator, and not on chrome.

Here is the best way I found to make two structures (phonegap and jQuery Mobile) to work together.

In my index.html

  <script type="text/javascript" src="js/libs/LABjs/LAB.min.js"></script> <script type="text/javascript" src="js/libs/jQuery/jquery-1.9.1.js"></script> <script type="text/javascript" src="js/index.js"></script> <script type="text/javascript" src="js/libs/jQuery/jquery.mobile-1.3.1.js"></script>

Please note that I use the LABjs library to load JS scripts (cordova.js loads only if we find that we are on the device), you can find it in google for the LABjs library.

In my "js / index.js"

  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();
+6
source

Add

 <script type="text/javascript" src="cordova.js"></script>

inside your index.html file, it worked for me;)

+3
source

just use

 <script type="text/javascript" src="js/index.js"></script> <script type="text/javascript"> init(); </script>

INSTEAD

  <script type="text/javascript" src="js/index.js"></script> <script type="text/javascript"> $(document).ready(function(){ init(); }); </script>`
0
source

Source: https://habr.com/ru/post/1492931/

More articles:


All Articles