User Interface Design using jQuery Mobile CIS 136 Building Mobile Apps 1

Components of jQuery Mobile 2  Data attributes  Pages, Dialogs, and Transitions  Toolbars, Buttons, and icons  Content Formatting  Grids  Content blocks  Collapsible sets  ListViews  Forms  Events & Methods  Most are used automatically  do not need to code them yourself

jQuery form submission 3

jQuery.ajax() 4  Perform an asynchronous HTTP (Ajax) request  Syntax: jQuery.ajax(url[,settings]) OR $.ajax(url[,settings])

Parameters for $.ajax(url[,settings]) 5  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".

Parameters for $.ajax(url[,settings]) 6  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

Sending Data 7  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 form is used, the data is converted into a query string

Object example 8 $.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 ); });

Querystring example 9

Serialization 10  The serialize() method creating the string with the pair field name – field content in the correct format and ready to be passed to the data parameter of ajax() method.  Ex: will read all form fields with id tracking-form

What we are building 11

App’s page-view 12

Middle-ware that initiates the transmission 13

Server program 14

Returning back to middleware 15

Displaying next page-view 16