Using AJAX with JQuery Mobile
JQuery Mobile is a rapidly growing framework for smartphones and tablets and is gaining a lot of developer attention. The nice thing about it is we can also use all the power of JQuery along with it. Today I’ll cover a simple example that uses JQuery Mobile and PHP to send some data to the server and get a personalized message back. A “Hello World JQuery Mobile with PHP” if you will.
I have a previous JQuery Mobile tutorial that uses Ajax so you can also refer to the code in there. The difference isthat article uses a form, this one doesn’t.
Update – Nov. 11, 2010: Code updated to reflect changes in JQuery Mobile Alpha 2.
To get started I had a local web server and created a folder to put my files. I used Apache 2 but feel free to use anything that can run PHP. The PHP code is dead simple:
<?php echo"Hello "
. $_REQUEST["name"];?> |
Save that in a file called callajax.php.
Note: Using Ajax in JQuery is simple, see the docs for more information.
The full code for the index.html file is as follows:
<!DOCTYPE html>
<html> <head> <title>JQuery Mobile AJAX</title> <linkrel="stylesheet"href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css"/>
<scriptsrc="http://code.jquery.com/jquery-1.4.4.min.js"></script> <scriptsrc="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script></head> <body> <script> $(function() { $("#callAjax").click(function() { var theName = $.trim($("#theName").val()); if(theName.length > 0) { $.ajax({ type: "POST", url: "http://10.0.2.2/mobileajax/callajax.php", data: ({name: theName}), cache: false, dataType: "text", success: onSuccess }); } }); $("#resultLog").ajaxError(function(event, request, settings, exception) { $("#resultLog").html("Error Calling: " + settings.url + "<br/>HTPP Code: " + request.status);
}); function onSuccess(data) { $("#resultLog").html("Result: " + data); } }); </script> <divdata-role="page"id="indexPage"> <divdata-role="header"> <h1>JQuery Mobile</h1> </div> <divdata-role="content"> <divdata-role="fieldcontain"> <labelfor="theName">Please
enter your name:</label> <inputtype="text"id="theName"name="theName"value=""/>
</div> <inputid="callAjax"type="button"value="Call
Ajax"/> <divid="resultLog"></div> </div> <divdata-role="footer"> <h1>AJAX Demo</h1> </div> </div> </body></html> |
A few things to note:
- The call to the server uses this address:
http://10.0.2.2/mobileajax/callajax.php
This is because when I use the
Android emulator to run this web app it doesn’t currently support “localhost” so you need to use the10.0.2.2 address instead.
- I’m simply passing the value of the textbox to the PHP script (obviously you need some real security here in a production app as you should never trust data from the client). PHP processes this data and sends the reply back. If an error occurs in the Ajax call I capture that and print some data out.
Here are a couple screenshots:
