1. DYNAMIC WEB PAGES Dr Mohd Soperi Mohd Zahid Semester 2 2015/16

2. jQuery UI Set of customizable JavaScript and CSS files that enable advanced visual and behavorial effects on web page Download from http://jqueryui.comhttp://jqueryui.com Grab the full download package (Leave the components in their default (checked) state, choose a theme (UI Lightness), and select Download Unzip the downloaded files and you will get three folders: css, development-bundle, and js. Place files in your document root or within your project

3. Activity 31 jQuery UI Test Page jQuery UI Test Page Here's some text!

4. Activity 31 cont. Bounce Drop Explode Fade Highlight Puff Pulsate Shake Slide Transfer

5. Cont. body { font-family: arial, helvetica, sans-serif; } #mainContainer { border: 3px solid black; padding: 10px; } #mainHeadingContainer { width: 300px; background: #999999; text-align: center; } #header { width: 300px; height: 200px; background: #CCCCCC; margin-bottom: 25px; }.transfer { border: 2px solid black; }

6. Cont. $(document).ready(function() { $("form").on('submit', function() { var effect = $(":input[name=effect]").val(); var options = {}; var effectTime = 1000; if (effect === "transfer") { options = {to: "#trash", className: "transfer"}; effectTime = 500; } $("#header").effect(effect, options, effectTime); return false; }); $(":input[name=reset]").on('click', function() { $("#header").removeAttr("style"); });

7. Creating a Calendar jQuery UI Datepicker

8. cont. Call.js $(document).ready(function() { $('#cal').datepicker(); }); Cal.css #mainContainer { border: 3px solid black; padding: 10px; }

9. Customizing Calendar jQuery UI Datepicker $(document).ready(function() { $('#cal').datepicker({ showButtonPanel: true, numberofMonths: 2, changeMonth: true, changeYear: true });

10. Using Dialog box jQuery UI Datepicker Click here to open the dialog Here's a dialog

11. Cont. $(document).ready(function() { $('#dialog').dialog({ autoOpen: false, resizable: false, modal: true, buttons: { "Confirm": function() { $(this).dialog('close'); }, "Cancel": function() { $(this).dialog('close'); } }); $("#opener").on('click', function() { $('#dialog').dialog('open'); });

12. Autocomplete 1 jQuery UI Autocomplete functionality $(function() { var availableTutorials = [ "ActionScript", "Boostrap", "C", "C++", ]; $( "#automplete-1" ).autocomplete({ source: availableTutorials }); Type "a" or "s" Tags:

13. Autocomplete 2 jQuery UI Autocomplete functionality $(function() { var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL","ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp","Perl", "PHP", "Python", "Ruby", "Scala", "Scheme"]; $( "#tags" ).autocomplete({ source: availableTags }); Tags:

14. jQuery Mobile Helps to make sites work well in a mobile environment, although it is not the only option Takes care of the layout and the transition between pages of a site to make the site more like a mobile app Available as a download or through a Content Delivery Network (CDN) Download from http://jquerymobile.com, get the latest stable versionhttp://jquerymobile.com

15. Activity 35 (Basic) Test Page for jQuery Mobile Test Page This is some nice content. Footer content

16. Page link in jQueryMobile Links to pages in current site use AJAX by default. We could set it not to use AJAX Links to something outside current site do not use AJAX We will study AJAX later, but when it is used, an animation will be displayed before the linked page is loaded. The animation serves as transition to make the current page out of view Types of transition available: fade (default), flip, flow, none, pop, turn, slide, slidedown, slideup, slidefade

17. Linking without AJAX Links outside the site (to another domain) Links defined with rel=“external” attribute Links defined with the data-ajax=“false” attribute Links defined with a target attribute

18. Activity 36 (Ways of Loading links) Test Page for jQuery Mobile Link Page Load the test page (default behavior) Load test page (with turn transition effect) Load the test page (data-ajax = false) Load the test page (rel = external) Load the test page (in new tab) jQueryMobile page

19. Activity 37 (Navigation bar & buttons) Adding Navigation Tool bars Go Back My Buttons Go Forward Assalamualaykum/ Salam Sejahtera! Line 2 Line 3 Sweet Home Have a nice time!

20. AJAX Before this, we have been focusing on changing the behaviors, look and feel of pages, and little validation of forms Asynchronous JavaScript and XML (AJAX) JavaScript feature to allow pages to obtain and work with data to and from the server Examples of data are such as flight times, prices, etc. Three (3) primary components in a web application: Display, Behavior, and Data JavaScript interact with a database or server through AJAX or web services

21. AJAX Basics AJX-based applications send request from the web browser to the web server in the background (asynchronously) to make the pages more responsive to the user The actual process of sending a request and handling the response involves the fundamental AJAX object called, XMLHttpRequest jQuery includes a built-in function called $.ajax() to simplify the process of sending and receiving data XML contains extraneous information JSON (JacaScript Object Notation) provides a lightweight way to exchange data over AJAX - without X!

22. AJAX Architecture

23. XML vs JSON Mohd Soperi Mohd Zahid soperi@utm.my @mohdsoperi “person”: { “firstname” : “Mohd Soperi”, “lastname” : “Mohd Zahid”, “emailAddress” : { “primaryEmail” : “soperi@utm.my”“soperi@utm.my }, “twitter” : “@mohdsoperi” } XML version JSON version – represented in less extraneous information, but clarity is still maintained

24. Using AJAX Instantiate XMLHttpRequest object Build a request by specifying the request method (GET, POST, HEAD, etc), the URL to which request will be sent, and a true/false value indicating whether the request will asynchronous or synchronous Send requests to the web server synchronously or synchronously For asynchronous, check response status using onreadystatechange event to trigger code that checks the event’s readyState property (values given in next slide) AJAX response received (status value 200 = success) Process AJAX response

25. Synchronous Web interaction

26. Asynchronous Web interaction

27. readyState property values ValueDescription 0Uninitialized. Open but has yet to be called 1Open. Initialized but not yet sent 2Sent. The request has been sent 3Receiving. The HTTP response headers have been received, but the response body has not yet been completely received 4Loaded has been fully received

28. Activity 38 (A Simple AJAX program) Let AJAX change this text Change Content function loadDoc() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (xhttp.readyState == 4 && xhttp.status == 200) { document.getElementById("demo").innerHTML = xhttp.responseText; } xhttp.open("GET", "ajax_info.txt", true); xhttp.send(); }

29. Getting XML data Retrieve data from XML file Status: Status text: Response: Get XML data function loadDoc(url) { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (xhttp.readyState == 4 && xhttp.status == 200) { document.getElementById('A1').innerHTML = xhttp.status; document.getElementById('A2').innerHTML = xhttp.statusText; document.getElementById('A3').innerHTML = xhttp.responseText; } xhttp.open("GET", url, true); xhttp.send(); }

30. AJAX and jQuery jQuery offers several functions for working data such as.load(),.post(), and.getJSON() The.ajax() function can be used to set several parameters such as HTTP method, time-out, what to do when an error occurs, etc.

31. Activity 40 AJAX, jQuery and JSON Test $(document).ready(function() { $("#driver").click(function(event){ $.getJSON('test.json', function(jd) { $('#stage').html(' Name: ' + jd.name + ' '); $('#stage').append(' Age : ' + jd.age+ ' '); $('#stage').append(' Sex: ' + jd.sex+ ' '); }); Click on the button to load data from json file: STAGE