1. jQuery form submission CIS 136 Building Mobile Apps 1

2. Data transmission 2  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 3  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  When we launch our app on Phonegap desktop, it is running on a server

4. jQuery form submission 4  jQuery Mobile will submit form data via AJAX technology  data is sent directly to the action of your form  the result will be 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  the response triggers a full page refresh  response returns only the page div container and does not return the element with any links to the jQuery Mobile stylesheet  references to the jQuery and jQuery Mobile libraries are missing in the response

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

6. Parameters for AJAX calls 6  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.) 7  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 8  The data option can contain either:  a query string of the form key1=value1&key2=value2  an object of the form {key1: 'value1', key2: 'value2'}  If this format is used, the data is converted into a query string

9. Object example 9 $.ajax({ type: "POST", url: "some.php", data: { name: "John", location: "Boston" } }).success(function( msg ) { alert( "Data Saved: " + msg ); }); var menuId = $( "ul.nav" ).first().attr( "id" ); var request = $.ajax({ url: "script.php", type: "POST", data: { id : menuId }, dataType: "html“ }); request.success(function( msg ) { $( "#log" ).html( msg ); }); request.error(function( jqXHR, textStatus ) { alert( "Request failed: " + textStatus ); });

10. Querystring example 10

11. Serialization 11  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

12. Serialization 12  Serializing will format the data to be passed to the data parameter of ajax() method.  Ex: will read all form fields with id tracking-form

13. Client side validation 13  most common types of validation are:  presence of a required input  valid usernames/emails/phone numbers/etc  checking an "I agree…" box  Ex: checks if a required field doesn't have anything in it, and prevents the form from processing

14. What we are building 14

15. App’s page-view 15

16. AJAX call that initiates the transmission 16

17. Server program 17

18. Returning back to AJAX call 18

19. Displaying next page-view 19