Phonegap not executing ajax script (REST call towards the back-end)

Question

(Changed based on the answers I've received, and to flush out what this is about, i.e. calling a REST service from PhoneGab mobile client to a server, so I've taken all out except calling a REST service)

Windows 7 64 bit Developer station, running on IPhone 5

I would be out most gratefull if someone had the time to help me here, - because I've no idea what is going on, - I've read all the questions about this, - and answers...

I've installed PhoneGap (192.168.1.50:3000) on my IPhone and PC as the back-end (running JBOSS for the REST services on port 8080, tested with postman through http://192.168.1.50:8080/chkin/parent/51/kids and not only localhost, i.e. you can call the same REST service through the browser of the mobile and I get a responds back)

I now get the event (alert("deviceReady")), but it does not call the server, - that could be a config.xml problem? I've just taken the config.xml file out of the box, when it was generated and added

  <access origin=".*" />
  <access origin="http://127.0.0.1"/> <!-- allow local pages -->
  <access origin="http://192.168.1.50" subdomains="true"/>

Questions

1. Should config.xml be in the www folder one up? The folder structure when made by the phonegab-desktop looks like this (I copied into the www folder so it there two places, yes I know....):

   • .cordova
   • hooks
   • platforms
   • www
     • css
     • img
     • js
     • res
     • index.html
     • (config.xml)
   • plugins
   • config.xml

Content of the Config.xml:

    <widget xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0" id="com.phonegap.helloworld" version="1.0.0">
  <name>test</name>
  <description>Hello World sample application that responds to the deviceready event.</description>
  <author href="http://phonegap.com" email="support@phonegap.com">PhoneGap Team</author>
  <content src="index.html"/>
  <preference name="permissions" value="none"/>
  <preference name="orientation" value="default"/>
  <preference name="target-device" value="universal"/>
  <preference name="fullscreen" value="true"/>
  <preference name="webviewbounce" value="true"/>
  <preference name="prerendered-icon" value="true"/>
  <preference name="stay-in-webview" value="false"/>
  <preference name="ios-statusbarstyle" value="black-opaque"/>
  <preference name="detect-data-types" value="true"/>
  <preference name="exit-on-suspend" value="false"/>
  <preference name="show-splash-screen-spinner" value="true"/>
  <preference name="auto-hide-splash-screen" value="true"/>
  <preference name="disable-cursor" value="false"/>
  <preference name="android-minSdkVersion" value="14"/>
  <preference name="android-installLocation" value="auto"/>
  <gap:plugin name="org.apache.cordova.battery-status"/>
  <gap:plugin name="org.apache.cordova.camera"/>
  <gap:plugin name="org.apache.cordova.media-capture"/>
  <gap:plugin name="org.apache.cordova.console"/>
  <gap:plugin name="org.apache.cordova.contacts"/>
  <gap:plugin name="org.apache.cordova.device"/>
  <gap:plugin name="org.apache.cordova.device-motion"/>
  <gap:plugin name="org.apache.cordova.device-orientation"/>
  <gap:plugin name="org.apache.cordova.dialogs"/>
  <gap:plugin name="org.apache.cordova.file"/>
  <gap:plugin name="org.apache.cordova.file-transfer"/>
  <gap:plugin name="org.apache.cordova.geolocation"/>
  <gap:plugin name="org.apache.cordova.globalization"/>
  <gap:plugin name="org.apache.cordova.inappbrowser"/>
  <gap:plugin name="org.apache.cordova.media"/>
  <gap:plugin name="org.apache.cordova.network-information"/>
  <gap:plugin name="org.apache.cordova.splashscreen"/>
  <gap:plugin name="org.apache.cordova.vibration"/>
  ..
  <access origin="*" />
  <access origin=".*" />
  //<access origin="http://127.0.0.1"/> <!-- allow local pages -->
  //<access origin="http://192.168.1.50" subdomains="true"/>
  ..
  <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>
</widget>

File: Index.html

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

File: index.js:

   var app = {
    // Application Constructor
    initialize: function() {
        this.bindEvents();
    },
    // Bind Event Listeners
    //
    // Bind any events that are required on startup. Common events are:
    // 'load', 'deviceready', 'offline', and 'online'.
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    // deviceready Event Handler
    //
    // The scope of 'this' is the event. In order to call the 'receivedEvent'
    // function, we must explicitly call 'app.receivedEvent(...);'
    onDeviceReady: function() {
        app.receivedEvent('deviceready');       
        alert("deviceReady");

        $.ajax({
        type: 'GET',
        url: 'http://192.168.1.50:8080/chkin/parent/51/kids',
        //async: false,
        crossDomain: true,            
        dataType: 'jsonp',
        success: function(data) {
                alert("Works! " + JSON.stringify(data));            
            },
        error:function(data){
                alert("Bad thing happend! " + JSON.stringify(data));            
            }
        });     


    },
    // Update DOM on a Received Event
    receivedEvent: function(id) {
        var parentElement = document.getElementById(id);
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');

        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');

        console.log('Received Event: ' + id);
    }
};

app.initialize();

I also figure out to use dataType: 'jsonp' instead of dataType: 'json' otherwise I could not get Ripple to call either

---

Finally I would like to know if there is any way I can see the log on the phone? That would be helpfull

Again thank you for you help!!!

---

PS: Just uploaded the file structure if there was something there: enter image description here

Answer 1

I've had many issues with Phonegap, switched to Cordova and many problems disappeared. To get back to your problem, I had JavaScript errors which only appeared during deviceready.

Do you have a mechanism for checking for JavaScript Errors while testing on the phone?

I wrote this mini library to help me track Cordova Errors: https://github.com/jVaaS/onerrorjs

Inside the error handler, you should do something like this (I have a <pre></pre> tag somewhere on my page to display errors):

jvaas.submitError = function (error) {
  $("pre").text = JSON.stringify(error);
}

Then if you are error free on the Cordova side, you should check for cross-domain errors - when you normally run your code, you'd run it as http://localhost or http://localhost:8080, but when it's running via Cordova / Phonegap, it's actually running as file://somefile.html, so you should test your html running it directly as a file in your browser with your console open to see if using non-http protocols causes cross-domain errors.

If you've checked all those, we can look at further solutions.

Answer 2

setup your main js in an alternative way

var app = {
    // Application Constructor
    initialize: function() {
        this.bindEvents();
    },
    // Bind Event Listeners
    //
    // Bind any events that are required on startup. Common events are:
    // 'load', 'deviceready', 'offline', and 'online'.
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    // deviceready Event Handler
    //
    // The scope of 'this' is the event. In order to call the 'receivedEvent'
    // function, we must explicitly call 'app.receivedEvent(...);'
    onDeviceReady: function() {


    // App code

    }}
app.initialize();

and include the scripts at the bottom of the body

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

and remove

<script>
            $(function(){           
               document.addEventListener("deviceready", onDeviceReady, true);                  
            });        
        </script>

i maybe missing some markup as i have about 1k worth of lines of code where // App code is

if you want to debug the App on Android check here -- Android remote debugging for Phonegap app does not work

Answer 3

There is kinder two problems that was wrong here

1) The first was the point made by Tasos, - it was the addEventListener, needed

2) The second is that Cordova/Phonegab is not "forgiven" I had made some stupid java scripts errors not picked up from the Ripple or Chrome, but I basically started all over and made something that worked using the alert command in phonegab to get out put, and then slowly adding stuff!

so I need to figure out to get logs out of PhoneGab, - but that can't be in this thread...

Answer 4

For logging/Debugging:

1. If you load you client phonegab project from the same server as the one where the rest services are then you can use Chrome with Ripple and it works, that gives a much better way of debug.

2. If you want to log it on the phone it's quite easy to setup please follow this for seting up weinre https://www.youtube.com/watch?v=xepgYpqj8ew Notice for starting Weinre up locale you write:

   weinre --httpPort 7777 --boundHost -all-

otherwise it won't listen to external connections!!!