jQuery Mobile, Phonegap, and remote Ajax calls

This post is more than 2 years old.

Here's something I knew wouldn't be a problem but I wanted to confirm. As you know, an HTML page cannot make an Ajax request to a remote server. There are ways around this (a proxy on your server or JSONP), but for the most part, it's a hard and fast rule. But what about for Android apps? Specifically - what if i use Phonegap and jQuery Mobile to build a "real" native application, will the same restrictions hold true? As I expected - they do not - and that's awesome news for folks wanting to make use of remote services. Here is a trivial example I built using Dreamweaver CS 5.5.

First - my HTML page.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery Mobile Web App</title> <link href="jquery-mobile/jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/> <script src="jquery-mobile/jquery-1.5.min.js" type="text/javascript"></script> <script src="jquery-mobile/jquery.mobile-1.0a3.min.js" type="text/javascript"></script> <!-- This reference to phonegap.js will allow for code hints as long as the current site has been configured as a mobile application. To configure the site as a mobile application, go to Site -> Mobile Applications -> Configure Application Framework... --> <script src="phonegap.js" type="text/javascript"></script> <script> $(document).ready(function() {

$("#testLink").click(function(e) {
	e.preventDefault();
	$("#resultBlock").html("Getting the funk - stand by...");	
	$.get("http://www.raymondcamden.com/demos/may62011/ray.cfc?method=hellofromray&returnFormat=plain", {}, function(data) {
		$("#resultBlock").html(data);
	})
});

}); </script> </head> <body>

<div data-role="page" id="page"> <div data-role="header"> <h1>Page One</h1> </div> <div data-role="content"> <a id="testLink" rel="external">Bring the Funk</a> <div data-role="collapsible"> <h3>Result from Ray</h3> <p id="resultBlock"></p> </div> </div> <div data-role="footer"> <h4>Page Footer</h4> </div> </div>

</body> </html>

Most of this is pretty vanilla HTML but make note of the content with the DIV block. I've got a link with an ID and then right below it a collapsible block. This is one of the jQuery Mobile UI widgets you can employ. Now go back to the top.

I've told jQuery to listen for click events on my link. When clicked, I set a quick status message and then fire off my request to a remote ColdFusion server. In this case it's just returning a string but obviously I could request JSON as well. I take the result and drop it in my collapsible div. The CFC returns a random number so I can test multiple clicks just to be sure.

And that's it. For those of you with Droid devices, I've attached the APK generated by the Dreamweaver/Phonegap relationship I'm officially calling Uber Awesome. Remember - if you have a device that doesn't allow for ad hoc installs - like my own HTC Inspire, you can download the APK to your machine and do a manual install. It's as easy as: adb install filename.apk (assuming your device is connected via USB of course).

Download attached file.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Brian Panulla posted on 5/7/2011 at 3:24 AM

This restriction actually isn't a hard and fast rule any more. Newer browsers can get around this if you use the Cross-Origin Resource Sharing standard:

http://www.nczonline.net/bl...

Comment 2 by Raymond Camden posted on 5/7/2011 at 3:45 AM

Interesting - and surprising how wide it is supported.

Comment 3 by Usman Ghani posted on 8/16/2011 at 5:30 AM

Hi Raymond, this trick is very useful thanks for sharing your knowledge but i have a question how to get dynamic urls like if i want to get the href from <a> tag i tried $(this).attr("href")); insted your given url. but it's not working thanks in advance

Comment 4 by Raymond Camden posted on 8/16/2011 at 5:33 AM

Well that should work, but it depends on the context. If you are using a click handler on the link, then THIS will refer to it. If you are using something else, then you need a different reference. If you are using my code, that should have worked though. Maybe share your code via pastebin.

Comment 5 by Alessio posted on 10/18/2011 at 1:02 PM

Hello when i try it i receive a 200 error, is any solution?

Comment 6 by Raymond Camden posted on 10/18/2011 at 2:52 PM

200 isn't an error. It means OK.

Comment 7 by TJ posted on 10/22/2011 at 6:08 AM

when i try and build in xcode, the ajax is not working, where it used to in DreamWeaver :(

Comment 8 by TJ posted on 10/22/2011 at 6:34 AM

Sorry, I guess I don't understand, it doesn't seem to actually make it into the final app. My app just sits there and does nothing.

Comment 9 by TJ posted on 10/22/2011 at 7:39 AM

Apologies, I was missing this at the top of my php file:

header('Access-Control-Allow-Origin: *');

Comment 10 by Nik posted on 2/17/2012 at 11:04 AM

Ray, thanks for this post! However, I am wondering what options do we have to "Secure" the cfc's that I make ajax calls to. Say we want to restrict only this app to call the cfc. The general public should not be able to call the cfc directly from their browsers or other applications. Any suggestions?

Comment 11 by Raymond Camden posted on 2/17/2012 at 4:12 PM

None, because you can't. A CFC with remote methods can be called from anywhere. You could do a check on the remote IP of the caller, but since you are supporting mobile, you don't know what any of the IPs will be.

Basically, don't even think about this route.

Comment 12 by mike posted on 11/1/2012 at 3:58 PM

The downloadable APK does not work. Upon launch, it just sits there in fact, the status message doesn't even update so I don't think its even trying.

Comment 13 by Raymond Camden posted on 11/1/2012 at 4:05 PM

It may be your Android version. This APK is over a year old - I'd recommend building a new version using PhoneGap Build.

Comment 14 by Okokoh Benjamin posted on 11/24/2013 at 1:12 AM

oh, I love this blog, how can I get a blog that will display formatted code of html and css. thanks

Comment 15 by Raymond Camden posted on 11/24/2013 at 1:22 AM

I've used 3 different code formatters (maybe more) over the history of this blog. What you see above is ColdFish (http://coldfish.riaforge.org/). I've also used Gists and PrismJS most recently.