1. jQuery form submission
CIS 136 Building Mobile Apps

2. Data transmission
Just about any App you can visualize needs to exchange information
A restaurant App needs to pull menus or coupons quickly, so you can figure out what to eat tonight
A video game App needs to let you log your high scores, or challenge your friends
A weather App needs to figure out where you are, and then collect weather information to show you, so you can plan your outdoor day
A news App is grabbing news off the internet to condense and display to you quickly
What do they all have in common?
Somewhere – in the Cloud – there’s a server that is sending and receiving data

3. Data transmission
You need to have a server to store your data if your app
has some kind of authentication/login
some kind of customization that you want to change it yourself at any time
even a simple form to receive information from the user
you need to have a way for the device to communicate with the server
sending data to and receiving data from this server

4. jQuery form submission
jQuery Mobile will submit form data via AJAX technology
data is sent directly to program you specify, which in turn will act upon the data, and return some information
the information returned is available to the page that made the AJAX call
No page reload
To use a standard http submission
set the data-ajax attribute = false on the form tag
<form data-ajax=“false” action=“mobile.php” method=“post”>
the response triggers a full page refresh

5. jQuery.ajax() Perform an asynchronous HTTP (AJAX) request Syntax:
jQuery.ajax(url[,settings]) OR
$.ajax(url[,settings])
$.get
$.post(url[,settings])
(url[,settings])

6. Parameters for AJAX calls
url – required
a string containing the URL to which the request is sent
settings – optional
A set of key/value pairs that configure the Ajax request
data - Data to be sent to the server. It is converted to a query string, if not already a string
datatype - The type of data that you're expecting back from the server (xml,html,script,json,text)
type - The type of request to make (e.g. "POST", "GET", "PUT"); default is "GET". (if using $.ajax)

7. Parameters for AJAX calls (cont.)
success - A function to be called if the request succeeds
gets passed three arguments
The data returned from the server
a string describing the status
The jQuery XMLhttpRequest object
error - A function to be called if the request fails
Gets passed three arguments
The jqueryXMLHttpRequest object
a string describing the type of error that occurred
an optional exception object

8. Sending Data using Serialization
The serialize() method will create the string with the key/value pairs (field name =field content) in the correct format
The serializeArray() method will create an array of objects

9. Serialization
Serializing will format the data to be passed to the data parameter of ajax() method.
Ex: will read all form fields with id attribute=“tracking-form”

10. Examples var formData = =$('#formName').serialize();
var request = $.ajax({
url: “
type: "POST",
data: { name: "John", location: "Boston" },
dataType: "html“
});
request.success(function( msg ) {
$( "#log" ).html( msg );
request.error(function( request, textStatus ) {
alert( “Transmission failed ");
var formData = =$('#formName').serialize();
var request = $.ajax({
url: “
type: "POST",
data: formData,
dataType: "html“
});
request.success(function( msg ) {
$( "#log" ).html( msg );
request.error(function( request, textStatus ) {
alert( “Transmission failed ");

11. What we are building

12. App’s page-view

13. AJAX call that initiates the transmission

14. Server program

15. Returning back to AJAX call

16. Displaying next page-view