CrossDomain ajax calling with Jquery and PhoneGap Build do not work

  • 4
  • Problem
  • Updated 8 years ago
I have this application that i have written using phonegap which when I compile and download to my android phone using the framework works without a hitch. But trying to use PhoneGap Build I end up with an application that refuses to do CrossDomain Ajax calls. The ajax call is never made. I tried using without crossDomain in the debugger but all ajax calls fail that way.

I would really appreciate if someone could shed some light on this.
Photo of Mackram

Mackram

  • 8 Posts
  • 0 Reply Likes
  • frustrated

Posted 9 years ago

  • 4
Photo of Mackram

Mackram

  • 8 Posts
  • 0 Reply Likes
Oh I forgot to mention that previous build on the older version of PhoneGap Build (ie back when it used to have the look and feel that is present in the docs now) did not cause any such problems.

And on a side note the blackberry version on the old Build compiled now I get error fail with no reason why it failed.
Photo of Andrew Lunny

Andrew Lunny

  • 1911 Posts
  • 199 Reply Likes
Are you doing a synchronous or an asynchronous Ajax call? There is a bug on Android where synchronous XHR calls will not work correctly, as detailed in this thread:
http://groups.google.com/group/phoneg...

It's possible that upgrading PhoneGap on our servers exposed this bug.

Not sure what the issue with BlackBerry builds of your app is. What is your app id on PhoneGap Build?
Photo of Mackram

Mackram

  • 8 Posts
  • 0 Reply Likes
Hey Andrew,

Well actually I am using asynchronous Ajax calls (jquery will only use asynchronous calls with crossDomain calls). Interestingly enough other asynchronous calls that are not crossDomain do not seem to have any problem.

I am not sure about whether the upgrade caused the problem or not. I have tested with phoneGap 0.9.4 and 0.9.6 (on my personal machine) without any trouble i could see. The app id is 2791 on PhoneGap Build. Would love to give any other info you need.

I would appreciate any help you could give.
Photo of Mackram

Mackram

  • 8 Posts
  • 0 Reply Likes
Side note it seems that the Blackberry issue was due to the icon I uploaded to the details page of the app which had a character that was not allowed. It is surprising but today the error description appeared while yesterday there was no description (which is why I figured it today).
Photo of toni.konstantinidis

toni.konstantinidis

  • 32 Posts
  • 1 Reply Like
if you are using ajax for crossDomain requests you have to use jsonp. jsonp can only be used with synchronous calls.
Photo of Mackram

Mackram

  • 8 Posts
  • 0 Reply Likes
Hey Toni,

I am very surprised by your reply mainly because when looking at the JQuery.ajax() docs the following stands out

asyncBoolean
Default: true

By default, all requests are sent asynchronously (i.e. this is set to true by default). If you need synchronous requests, set this option to false. Cross-domain requests and dataType: "jsonp" requests do not support synchronous operation. Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active.


As you can see from the above Cross-domain requests and dataType:jsonp do not support synchronous requests. Which means they are done asynchronously
Photo of toni.konstantinidis

toni.konstantinidis

  • 32 Posts
  • 1 Reply Like
Mh okay. When i was trying to figure out how these jsonp requests works, i always get the same answer, that i cant use asynchronous calls with jsonp.

If you are using the $.ajax()-Method of jquery than the synchronous-option is disabled, doesnt matter what you are using.

You can use this way: http://code.google.com/p/jquery-jsonp...

Or even this: http://docs.jquery.com/Release:jQuery...

you know how jsonp works? you did not get the answer in the success function of $.ajax(), you have to implement a callback function in javscript which is called by the jsonp request.
Photo of Mackram

Mackram

  • 8 Posts
  • 0 Reply Likes
Hey Toni,

well it would make sense that the synchronous options is disabled since only asynchronous calls are allowed although I myself have not used them. You can also use Firebug for example to easily test that it is actually asynchronous. I am aware of how jsonp works (callback functions and how jquery handles it) and as I mentioned in the post i have the code working when I compile it myself using phonegap (using the cross domain) however when I use phonegap build I get the issue. Maybe if someone could help by letting me know what version does phonegap build use I could try to emulate.
Photo of toni.konstantinidis

toni.konstantinidis

  • 32 Posts
  • 1 Reply Like
I Think PhoneGap Build is running on version 0.9.5 and they are still working on updating it to 0.9.6.
Maybe you can show us a little code snippet of your call and the callback function?
Photo of Mackram

Mackram

  • 8 Posts
  • 0 Reply Likes
Hmm on version 0.9.5 okay I will try test that. Regarding the snippet here is the snippet


var sendData = {
method:"doMobileSearch",
q:$("#search").val(),
user: user,
check: check
};

$.ajax({
data: sendData,
dataType: "jsonp",
url: globalServerUrl,
crossDomain: true,
success: function (data){
if(data == null){
$.mobile.changePage("#error","slide",false,true);
return;
}
if(data.success){
$("#resultlist").html(data.resultsList);
$.mobile.changePage("#results","slide",false,true);
$("#resultlist").listview('refresh');
}
},
error: function(request, status){
$.mobile.changePage("#error","slide",false,true);
return;
}});


Please note that in the code neither the error nor the success function is called it simply never makes the call. (While when using the version that I compiled with 0.9.4 works flawlessly)
Photo of toni.konstantinidis

toni.konstantinidis

  • 32 Posts
  • 1 Reply Like
Yea Makram,

i had the same problems some weeks ago...
on my notebook it was working fine, but at the point i used phonegap build service it wasnt working anymore.
then i started searching and i found some articels about crossDomain and jsonp.
you have to use the jsonp- and jsonpCallback-Attribute like that:

$.ajax({
url: http://url.com
type: "GET",
data: 'method=doMobileSearch',
dataType: 'jsonp',
jsonp: 'callback',
jsonpCallback: 'callbackFunction',
success: function(){
}
});

The request will then look like that: http://url.com?method=doMobileSearch&.... And if the response is complete, jquery wont call the success function, it will call the callbackFunction, so you have to declarate this in your js-file too.

function callbackFunction(data)
{
if(data == null){
$.mobile.changePage("#error","slide",false,true);
return;
}

if(data.success){
$("#resultlist").html(data.resultsList);
$.mobile.changePage("#results","slide",false,true);
$("#resultlist").listview('refresh');
}
}

thats how it is working. im using this im my application, too.
hope i can help you out with your problem.
Photo of Mackram

Mackram

  • 8 Posts
  • 0 Reply Likes
Hey Toni,

Thanks for the tip but unfortunately it did not work. I still have the same problems and no call is made to the callback function. No call is being made even to the server (ie nothing even appears in the server logs).

What version of jquery are you using maybe there is some compatability issue? (Also if you could try to create a new app with your current working code would it work? Could it be that some upgrade to phonegap build has caused the issue?)

Thanks so much for all the help.
Photo of emalueg

emalueg

  • 7 Posts
  • 0 Reply Likes
Mackram: did you ever get a jsonp call to succeed to an external server with PhoneGap:Build
Photo of Amir

Amir

  • 1 Post
  • 0 Reply Likes
any luck getting that cross domain to work?
I have the same issue,
can't get it to work, although there are ppl who have it working,
could you guide us also how to plz,
Photo of Gotta Getmedat

Gotta Getmedat

  • 39 Posts
  • 0 Reply Likes
This should have some working examples, I battled and seem to have one for now.
So many little things tried and so on, basically impossible to explain what went right.
For me hours were lost with http// instead of http:// dam glasses, and high res old dim CRT monitor.
Photo of emalueg

emalueg

  • 7 Posts
  • 0 Reply Likes
I was finally able to get it to work and the trick for me was that i hadn't been including the necessary jquery libraries to make the call.

Once I uploaded the files and added:

<script type="text/javascript" src="assets/js/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="assets/js/jquery.mobile-1.0rc1.min.js"></script>


Then my call worked:


$.ajax({
url: 'http://yoururl.com/JSONcall?param=xx',
dataType: 'jsonp',
jsonp: 'callback',
jsonpCallback: 'callbackFunction',
timeout: 60000,
success: function(data, status){
alert("Data Loaded");
},
error: function(){
alert("Error Loading Data");
}
});