Phonegap Build API calls not firing

Question

I'm making an application using jQuery Mobile and Phonegap Build. The jQuery Mobile javascript code works fine, however the phonegap javascript code doesn't seems to be working. The application it's using a multiple html template, and I made the login the index file of the application.

I'm using phonegap version 3.1.0 (current default for build service)

I'm adding the following lines in the config.xml file:

<gap:plugin name="org.apache.cordova.device" />
<gap:plugin name="org.apache.cordova.file" />

Then, at index.html, I'm adding the following scripts at the header:

<script src="phonegap.js"></script>
<script src="js/settings_page.js"></script>
<script src="js/jquery-2.0.3.min.js"></script>
<script src="js/jquery-mobile-events.js"></script>
<script src="js/jquery.mobile-1.4.1.min.js"></script>

The settings_page file includes some basic phonegap API interaction, which writes some default values in local storage in case they're not set:

console.log('added');

document.addEventListener('deviceready', deviceReady, false);

function deviceReady() {

   console.log('called');

   var application_settings = window.localStorage;

   //if no settings have been created, create them
   if (application_settings('defaults') === null) {
       application_settings.setItem('defaults', 'true');
       application_settings.setItem('type', 'all');
       application_settings.setItem('sport', 'all');
       application_settings.setItem('customer', 'all');
       application_settings.setItem('order', 'date');
       application_settings.setItem('refresh', 'never');
       console.log('defaults set');
   }

}

Using ripple emulator I can see the 'added' comment in the console log, however never reaches the 'called' one, and if I run the application and use weinre to debug it, none of the console logs registers.

In both cases none of the keys are being generated, but I'm not getting any errors either, am I missing something? I changed the features to plugins as suggested in here PhoneGap 3.1 Build Device Is Not Defined and here http://www.raymondcamden.com/index.cfm/2013/10/1/PhoneGap-Build-and-PhoneGap-30 but it's still not working, any help is highly appreciated

Answer 1

Adding following line help me... I have done all tries but nothing helped me so finally I went through http://docs.build.phonegap.com/en_US/#googtrans(en) Configurations block..

<plugin name="cordova-plugin-whitelist" version="1"/>
<allow-intent href="http://*/*"/>
<allow-intent href="https://*/*"/>
<allow-intent href="tel:*"/>
<allow-intent href="sms:*"/>
<allow-intent href="mailto:*"/>
<allow-intent href="geo:*"/>
<platform name="android">
    <allow-intent href="market:*"/>
</platform>
<platform name="ios">
    <allow-intent href="itms:*"/>
    <allow-intent href="itms-apps:*"/>
</platform>

Answer 2

Ok after hours of debugging and testing I solved the issue, I think this can be helpful for future references to any other phonegap build users so I'm gonna list step by step guide on what I did in here. I don't know if this is the best approach though, so I'd really appreciate some feedback on things that can be improved :)

To make jQuery work with Phonegap Build and Phonegap API you need to do the following in your application's index:

• Please note the API calls won't run in the emulator, you need a real device to check this out. (Thanks @Dato' Mohammad Nurdin for this valuable information)
• Add a reference to the phonegap script <script src="phonegap.js"></script> ideally this can be your first script reference, it doesn't requires any library to work and you don't need to have the library itself, phonegap build will add it once it compiles the code.
• Add jQuery reference (in case you need it, since I was working with jQuery Mobile I'll need it)
• Device ready will take place in your index file when you'll next add the event listener, adding this in other scripts will cause some issues with the device ready event. But if you need to check the device ready status in other scripts, you can add a global variable available for all of the scripts bellow, if you don't know how you can create a script with a variable, this will make it available for all the scripts referenced after this one. Example: <script>var phonegap_ready = false</script>

• add a script with your event listener

  document.addEventListener("deviceready", onDeviceReady, false);
  
  function onDeviceReady() {
      phonegap_ready = true;
  }
  

• Add the source of jQuery Mobile and your js events and code files.

As a side note, checking for device ready while working with jQuery Mobile it's just a standard, after some test I ran, phonegap device ready fires way more faster than jQuery pageshow event (which makes sense considering all of the DOM manipulation jqm page events do) however I still recommend it just as a caution.

Once in your code you can use the deffered call $.when() to check asynchronously to not execute the phonegap calls until the phonegap framework is fully operational. As an example using the previously global variable created:

$(document).on('pageshow', '#login_page', function (parent_event) {
    //do jQuery Mobile event handlings here
    $.when(phonegap_ready === true).then(function () {            
        phonegapApiFunctionsCall();
    });
});

If the features or plugins (calls to phonegap API are performed as features before Phonegap Build 3.0, and as of Phonegap Build 3.0 these were replaced for plugins) you'll be able to run the API commands from the phonegapApiFunctionsCall() and will avoid the initialization issues between phonegap deviceready event and jQuery Mobile page initialization events.

Answer 3

You need to run on your actual device or simulator. Run on ripple chrome extension won't help you.