CODEWITHSUNDEEP
androidjqueryajaxcordovadurandal
Okky
Okky

Reputation: 10466

Phonegap android app using durandal : page with ajax call not opening

I'm fairly new with android I got an issue that page with ajax call is not loading in native app developed using Phonegap.

Cross-domain AJAX POST-request works perfectly fine on web browsers including browsers on mobile phones, but doesn't work for native applications built using Phonegap.

I have created an app in durandal that gets data from Facebook and shows in a page. It works fine in the browsers but the page with ajax call is not loaded in the native app built using Phonegap. Note: other static pages works fine.

My Ajax script:

define(function(require){
  return {
    getCustomers:function(){
      //do some ajax and return a promise
        return $.ajax({
          url: 'http://graph.facebook.com/facebook?callback=?',
          dataType: 'json',
        }).promise();
    }
  };
});

Domain whitelisting - config.xml

<access origin="*"/>
<!-- <content src="http://mysite.com/myapp.html" /> for external pages -->
<content src="index.html" />

User permission

<uses-permission android:name="android.permission.INTERNET" />

I got an error. I don't know is that relevant to this?

TypeError: Result of expression 'parentElement' [null] is not an object. at file:///android_asset/www/js/index.js:41

Upvotes: 3

Views: 516

Answers (2)

takrishna
takrishna

Reputation: 5002

CORS parameter must be enabled in your server end as well, along with passing the "mobile.allowCrossDomainPages = true;" in phonegap.

search for CORS related quetions in stackoverflow, there are many solutions.

Let me explain why it works in mobile browser but not on phonegap packaging. Phonegap packaging pulls the files from the application's local file system, making the reference domain as "Local". When you make a request to the URL, it is apparently in a different domain, hence the CORS. Enabling CORS parameter in phonegap configuration mostly solves the issue. In case it pertains, you must check that the webservice/URL supports the CORS. Look for server side CORS parameter enabling.

Upvotes: 1

clu3Less
clu3Less

Reputation: 1892

It should work. Anyway, Try adding this to the head code,

$(document).bind("mobileinit", function () {
    $.support.cors = true;
    $.mobile.allowCrossDomainPages = true;
});

and also try removing the , here

    return $.ajax({
      url: 'http://graph.facebook.com/facebook?callback=?',
      dataType: 'json' //<<---HERE
    }).promise();

is it json or jsonp ?

Upvotes: 0

Related Questions