Watch, Follow, &
Connect with Us

For forums, blogs and more please visit our
Developer Tools Community.


Welcome, Guest
Guest Settings
Help

Thread: Using ajax with PhoneGap for mobile development fails


This question is answered. Helpful answers available: 1. Correct answers available: 1.


Permlink Replies: 7 - Last Post: Jan 6, 2015 2:23 AM Last Post By: Bevan Edwards
Bevan Edwards

Posts: 5
Registered: 3/16/03
Using ajax with PhoneGap for mobile development fails  
Click to report abuse...   Click to reply to this thread Reply
  Posted: Jan 2, 2015 10:58 PM
I have been trying to develop a simple mobile application which has a single button and a label. When the button is clicked, I use ajax to request JSON formatted data from a web site - this always fails with no useful error information.

I have tried using ajax to access a static web resource on my local web server, and that seems to work fine.

I have looked at a lot of articles about using PhoneGap and ajax with cross domain requests, but none of the suggestions have helped. I have tried $.support.cors=true, $.mobile.allowCrossDomainPages=true and various combinations of these. I have also added the web site domain name into the ExternalHosts section of Cordova.plist, but that hasn't made a difference.

So far I have only tried running this in the debugger for HTML5 Builder - I haven't actually tried putting it onto a device yet.

Does anyone have any suggestions about how to make this work in the debugger?
Angelica Zampieri

Posts: 15
Registered: 11/17/12
Re: Using ajax with PhoneGap for mobile development fails
Helpful
Click to report abuse...   Click to reply to this thread Reply
  Posted: Jan 2, 2015 11:44 PM   in response to: Bevan Edwards in response to: Bevan Edwards
Bevan Edwards wrote:
I have been trying to develop a simple mobile application which has a single button and a label. When the button is clicked, I use ajax to request JSON formatted data from a web site - this always fails with no useful error information.

I have tried using ajax to access a static web resource on my local web server, and that seems to work fine.

I have looked at a lot of articles about using PhoneGap and ajax with cross domain requests, but none of the suggestions have helped. I have tried $.support.cors=true, $.mobile.allowCrossDomainPages=true and various combinations of these. I have also added the web site domain name into the ExternalHosts section of Cordova.plist, but that hasn't made a difference.

So far I have only tried running this in the debugger for HTML5 Builder - I haven't actually tried putting it onto a device yet.

Does anyone have any suggestions about how to make this work in the debugger?
I've the same problem. For debugging ajax or javascript request you try to use Firebug in Firefox.
More in http://docwiki.embarcadero.com/HTML5_Builder/en/Mobile_Debugging
Bevan Edwards

Posts: 5
Registered: 3/16/03
Re: Using ajax with PhoneGap for mobile development fails  
Click to report abuse...   Click to reply to this thread Reply
  Posted: Jan 3, 2015 1:47 AM   in response to: Angelica Zampieri in response to: Angelica Zampieri
Angelica Zampieri wrote:
Bevan Edwards wrote:
I have been trying to develop a simple mobile application which has a single button and a label. When the button is clicked, I use ajax to request JSON formatted data from a web site - this always fails with no useful error information.

I have tried using ajax to access a static web resource on my local web server, and that seems to work fine.

I have looked at a lot of articles about using PhoneGap and ajax with cross domain requests, but none of the suggestions have helped. I have tried $.support.cors=true, $.mobile.allowCrossDomainPages=true and various combinations of these. I have also added the web site domain name into the ExternalHosts section of Cordova.plist, but that hasn't made a difference.

So far I have only tried running this in the debugger for HTML5 Builder - I haven't actually tried putting it onto a device yet.

Does anyone have any suggestions about how to make this work in the debugger?
I've the same problem. For debugging ajax or javascript request you try to use Firebug in Firefox.
More in http://docwiki.embarcadero.com/HTML5_Builder/en/Mobile_Debugging

Unfortunately it's not really a bug with the JavaScript code so much as an issue using ajax from within jQuery.
Bevan Edwards

Posts: 5
Registered: 3/16/03
Re: Using ajax with PhoneGap for mobile development fails  
Click to report abuse...   Click to reply to this thread Reply
  Posted: Jan 3, 2015 1:57 AM   in response to: Bevan Edwards in response to: Bevan Edwards
Bevan Edwards wrote:
I have been trying to develop a simple mobile application which has a single button and a label. When the button is clicked, I use ajax to request JSON formatted data from a web site - this always fails with no useful error information.

I have tried using ajax to access a static web resource on my local web server, and that seems to work fine.

I have looked at a lot of articles about using PhoneGap and ajax with cross domain requests, but none of the suggestions have helped. I have tried $.support.cors=true, $.mobile.allowCrossDomainPages=true and various combinations of these. I have also added the web site domain name into the ExternalHosts section of Cordova.plist, but that hasn't made a difference.

So far I have only tried running this in the debugger for HTML5 Builder - I haven't actually tried putting it onto a device yet.

Does anyone have any suggestions about how to make this work in the debugger?

I have managed to figure this out - it turns out that ajax (and XMLHttpRequest) does not support requests from one domain to another (in this case from the local web site I was testing against to the remote web site I was trying to retrieve data from). After a bit more research, I found that I had to use the dataType: "jsonp" and jsonpCallback: "myCallback" in the ajax request - but this only worked if (a) I provided a globally accessible JavaScript function called myCallback (taking a single parameter) and (b) the web page being called identified the "callback=myCallback" parameter on the query string and correctly returned myCallback("<json-data>") instead of just <json-data>.

So, to summarise, my mobile application code looks a little like this:
function ProcessJSONData(data)
{
// process the response data
}

function MButton1Click(event)
{
event.preventDefault();
$.ajax({
url: "http://mydomain.com/get-my-data.php",
type: "GET",
crossDomain: true,
dataType: "jsonp",
jsonpCallback: "ProcessJSONData",
timeout: 10000
})
.fail(function() {
// Perform error handling
});

return false;
}


And web-based data provider looks like this:
$res = "<json data>";
if(isset($_REQUEST['callback']))
$res = $_REQUEST['callback']."(".json_encode($res).")";
echo $res;

I hope this helps someone else to avoid the several days of searching this has caused me :D

Angelica Zampieri

Posts: 15
Registered: 11/17/12
Re: Using ajax with PhoneGap for mobile development fails  
Click to report abuse...   Click to reply to this thread Reply
  Posted: Jan 3, 2015 3:22 AM   in response to: Bevan Edwards in response to: Bevan Edwards
Bevan Edwards wrote:
Bevan Edwards wrote:
I have been trying to develop a simple mobile application which has a single button and a label. When the button is clicked, I use ajax to request JSON formatted data from a web site - this always fails with no useful error information.

I have tried using ajax to access a static web resource on my local web server, and that seems to work fine.

I have looked at a lot of articles about using PhoneGap and ajax with cross domain requests, but none of the suggestions have helped. I have tried $.support.cors=true, $.mobile.allowCrossDomainPages=true and various combinations of these. I have also added the web site domain name into the ExternalHosts section of Cordova.plist, but that hasn't made a difference.

So far I have only tried running this in the debugger for HTML5 Builder - I haven't actually tried putting it onto a device yet.

Does anyone have any suggestions about how to make this work in the debugger?

I have managed to figure this out - it turns out that ajax (and XMLHttpRequest) does not support requests from one domain to another (in this case from the local web site I was testing against to the remote web site I was trying to retrieve data from). After a bit more research, I found that I had to use the dataType: "jsonp" and jsonpCallback: "myCallback" in the ajax request - but this only worked if (a) I provided a globally accessible JavaScript function called myCallback (taking a single parameter) and (b) the web page being called identified the "callback=myCallback" parameter on the query string and correctly returned myCallback("<json-data>") instead of just <json-data>.

So, to summarise, my mobile application code looks a little like this:
function ProcessJSONData(data)
{
// process the response data
}

function MButton1Click(event)
{
event.preventDefault();
$.ajax({
url: "http://mydomain.com/get-my-data.php",
type: "GET",
crossDomain: true,
dataType: "jsonp",
jsonpCallback: "ProcessJSONData",
timeout: 10000
})
.fail(function() {
// Perform error handling
});

return false;
}


And web-based data provider looks like this:
$res = "<json data>";
if(isset($_REQUEST['callback']))
$res = $_REQUEST['callback']."(".json_encode($res).")";
echo $res;

I hope this helps someone else to avoid the several days of searching this has caused me :D


It 's true this works I also used to do I upload files but what is the point then set the ajaxuri? That is, what is the purpose of this property but to be able to communicate with the web server remotely?
Practically all components of access to data are useless if you want to create a phonegap app. This, however, is not well specified in the documentation.
So it seems that a PhoneGap application should rely only ever a webservice to communicate with the web server and everything works on the client side must be written through events javascript.
Is this correct?
Bevan Edwards

Posts: 5
Registered: 3/16/03
Re: Using ajax with PhoneGap for mobile development fails  
Click to report abuse...   Click to reply to this thread Reply
  Posted: Jan 3, 2015 10:14 AM   in response to: Angelica Zampieri in response to: Angelica Zampieri
Angelica Zampieri wrote:
Bevan Edwards wrote:
Bevan Edwards wrote:
I have been trying to develop a simple mobile application which has a single button and a label. When the button is clicked, I use ajax to request JSON formatted data from a web site - this always fails with no useful error information.

I have tried using ajax to access a static web resource on my local web server, and that seems to work fine.

I have looked at a lot of articles about using PhoneGap and ajax with cross domain requests, but none of the suggestions have helped. I have tried $.support.cors=true, $.mobile.allowCrossDomainPages=true and various combinations of these. I have also added the web site domain name into the ExternalHosts section of Cordova.plist, but that hasn't made a difference.

So far I have only tried running this in the debugger for HTML5 Builder - I haven't actually tried putting it onto a device yet.

Does anyone have any suggestions about how to make this work in the debugger?

I have managed to figure this out - it turns out that ajax (and XMLHttpRequest) does not support requests from one domain to another (in this case from the local web site I was testing against to the remote web site I was trying to retrieve data from). After a bit more research, I found that I had to use the dataType: "jsonp" and jsonpCallback: "myCallback" in the ajax request - but this only worked if (a) I provided a globally accessible JavaScript function called myCallback (taking a single parameter) and (b) the web page being called identified the "callback=myCallback" parameter on the query string and correctly returned myCallback("<json-data>") instead of just <json-data>.

So, to summarise, my mobile application code looks a little like this:
function ProcessJSONData(data)
{
// process the response data
}

function MButton1Click(event)
{
event.preventDefault();
$.ajax({
url: "http://mydomain.com/get-my-data.php",
type: "GET",
crossDomain: true,
dataType: "jsonp",
jsonpCallback: "ProcessJSONData",
timeout: 10000
})
.fail(function() {
// Perform error handling
});

return false;
}


And web-based data provider looks like this:
$res = "<json data>";
if(isset($_REQUEST['callback']))
$res = $_REQUEST['callback']."(".json_encode($res).")";
echo $res;

I hope this helps someone else to avoid the several days of searching this has caused me :D


It 's true this works I also used to do I upload files but what is the point then set the ajaxuri? That is, what is the purpose of this property but to be able to communicate with the web server remotely?
Practically all components of access to data are useless if you want to create a phonegap app. This, however, is not well specified in the documentation.
So it seems that a PhoneGap application should rely only ever a webservice to communicate with the web server and everything works on the client side must be written through events javascript.
Is this correct?

I agree that the documentation around this is very poor, but I don't think it's a failing of PhoneGap so much as jQuery. I have seen that in Android applications you use the URL object to make GET/POST to a remote web service, so perhaps there is something similar for other mobile technologies. I also have seen mention of at least one HTTP Client component for jQuery, but I didn't want to add any third-party components into my application (I'm not sure if it would have suffered from the same problem).

When I think about the other situations where I have used ajax, it has always been on web sites where I am sending requests back to the web server for the site - this is the first time I have had to make a request to a "different" web site. So I guess it's all part of the learning curve - maybe it would have been different if I had come across this before in a web application, rather than with PhoneGap.

I guess it's possible to use PhoneGap to write an application which operates solely on the mobile device, but I feel that any really "useful" application would need to communicate with a web server at some point.
To answer your last question, I think the answer is "yes", at least when writing a Client Mobile application in HTML5 Builder. If you choose a Server Mobile application instead (which I played around with while trying to resolve this issue), then I believe that every request will be made to the server side of your application (which would affect bandwidth usage and performance, I guess), so you could then have your PHP code send the request to a remote web server to retrieve data.

I don't believe this is ideal, but now I have it working I can move on. I'm keen to move to XE7 and look at how this can be done using native code, rather than HTML ;-)
Angelica Zampieri

Posts: 15
Registered: 11/17/12
Re: Using ajax with PhoneGap for mobile development fails  
Click to report abuse...   Click to reply to this thread Reply
  Posted: Jan 6, 2015 12:40 AM   in response to: Bevan Edwards in response to: Bevan Edwards
It 's true this works I also used to do I upload files but what is the point then set the ajaxuri? That is, what is the purpose of this property but to be able to communicate with the web server remotely?
Practically all components of access to data are useless if you want to create a phonegap app. This, however, is not well specified in the documentation.
So it seems that a PhoneGap application should rely only ever a webservice to communicate with the web server and everything works on the client side must be written through events javascript.
Is this correct?

I agree that the documentation around this is very poor, but I don't think it's a failing of PhoneGap so much as jQuery. I have seen that in Android applications you use the URL object to make GET/POST to a remote web service, so perhaps there is something similar for other mobile technologies. I also have seen mention of at least one HTTP Client component for jQuery, but I didn't want to add any third-party components into my application (I'm not sure if it would have suffered from the same problem).

When I think about the other situations where I have used ajax, it has always been on web sites where I am sending requests back to the web server for the site - this is the first time I have had to make a request to a "different" web site. So I guess it's all part of the learning curve - maybe it would have been different if I had come across this before in a web application, rather than with PhoneGap.

I guess it's possible to use PhoneGap to write an application which operates solely on the mobile device, but I feel that any really "useful" application would need to communicate with a web server at some point.
To answer your last question, I think the answer is "yes", at least when writing a Client Mobile application in HTML5 Builder. If you choose a Server Mobile application instead (which I played around with while trying to resolve this issue), then I believe that every request will be made to the server side of your application (which would affect bandwidth usage and performance, I guess), so you could then have your PHP code send the request to a remote web server to retrieve data.

I don't believe this is ideal, but now I have it working I can move on. I'm keen to move to XE7 and look at how this can be done using native code, rather than HTML ;-)

Also I think every mobile application needs sooner or later a contact with a web server. I have become familiar with ajax calls but no lean Ajax of H5B because I do not think functions well. Thanks for the clarification.
Bevan Edwards

Posts: 5
Registered: 3/16/03
Re: Using ajax with PhoneGap for mobile development fails  
Click to report abuse...   Click to reply to this thread Reply
  Posted: Jan 6, 2015 2:23 AM   in response to: Angelica Zampieri in response to: Angelica Zampieri
Angelica Zampieri wrote:
It 's true this works I also used to do I upload files but what is the point then set the ajaxuri? That is, what is the purpose of this property but to be able to communicate with the web server remotely?
Practically all components of access to data are useless if you want to create a phonegap app. This, however, is not well specified in the documentation.
So it seems that a PhoneGap application should rely only ever a webservice to communicate with the web server and everything works on the client side must be written through events javascript.
Is this correct?

I agree that the documentation around this is very poor, but I don't think it's a failing of PhoneGap so much as jQuery. I have seen that in Android applications you use the URL object to make GET/POST to a remote web service, so perhaps there is something similar for other mobile technologies. I also have seen mention of at least one HTTP Client component for jQuery, but I didn't want to add any third-party components into my application (I'm not sure if it would have suffered from the same problem).

When I think about the other situations where I have used ajax, it has always been on web sites where I am sending requests back to the web server for the site - this is the first time I have had to make a request to a "different" web site. So I guess it's all part of the learning curve - maybe it would have been different if I had come across this before in a web application, rather than with PhoneGap.

I guess it's possible to use PhoneGap to write an application which operates solely on the mobile device, but I feel that any really "useful" application would need to communicate with a web server at some point.
To answer your last question, I think the answer is "yes", at least when writing a Client Mobile application in HTML5 Builder. If you choose a Server Mobile application instead (which I played around with while trying to resolve this issue), then I believe that every request will be made to the server side of your application (which would affect bandwidth usage and performance, I guess), so you could then have your PHP code send the request to a remote web server to retrieve data.

I don't believe this is ideal, but now I have it working I can move on. I'm keen to move to XE7 and look at how this can be done using native code, rather than HTML ;-)

Also I think every mobile application needs sooner or later a contact with a web server. I have become familiar with ajax calls but no lean Ajax of H5B because I do not think functions well. Thanks for the clarification.

Actually, it's the same ajax and jQuery as anywhere else (subject to the version you have installed), except it uses the mobile version with some specific peculiarities.
If you did the same thing on a web site, you would experience the same issues.
It's all about learning how to use the tools available to achieve the results you need.
Legend
Helpful Answer (5 pts)
Correct Answer (10 pts)

Server Response from: ETNAJIVE02