AJAX, JSON, jQuery, livequery <ul><li>Pradeep Kumar Silamkoti </li></ul>
Agenda <ul><li>AJAX </li></ul><ul><li>JSON </li></ul><ul><li>jQuery and livequery </li></ul><ul><li>Payment central  </li>...
AJAX <ul><li>Rich User Experience </li></ul><ul><li>Rich internet applications (RIA) </li></ul><ul><li>AJAX = DHTML + Asyn...
Technologies used in AJAX <ul><li>•  Javascript </li></ul><ul><li>Loosely typed scripting language </li></ul><ul><li>JavaS...
Anatomy of AJAX Interaction
<ul><li>What is JSON? </li></ul><ul><li>Why we use JSON? </li></ul><ul><li>JSON structure </li></ul><ul><li>JSON Object </...
<ul><li>jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animatin...
<ul><li>jQuery selectors are used for selecting the area of the document where we want to apply styles.  </li></ul><ul><li...
Selectors <ul><li>Get document element by tag: </li></ul><ul><li>$(document) </li></ul><ul><li>Get all element by tag name...
Selectors <ul><li>Get a specific element where ID like “m_tabel”: </li></ul><ul><li>$(“table[id*=m_table]”) </li></ul><ul>...
Selectors <ul><li>More selectors: </li></ul><ul><li>Visibility/content </li></ul><ul><li>:hidden :visible :enable :disable...
<ul><li>Methods get and set DOM attributes of elements.  </li></ul><ul><li>.addClass()  </li></ul><ul><li>.attr() </li></u...
Attributes <ul><li>Add Remove attribute: </li></ul><ul><li>$(“div”).attr(“style”,” border-style:solid”); </li></ul><ul><li...
Attributes <ul><li>Toggle Class: </li></ul><ul><li>$(“div”).toggleClass(“red”);  </li></ul><ul><li>GetSet HTML: </li></ul>...
<ul><li>.add() </li></ul><ul><li>.addSelf() </li></ul><ul><li>.children() </li></ul><ul><li>.find() </li></ul><ul><li>.fir...
Traversing <ul><li>Find elements under a parent element: </li></ul><ul><li>$(“#m_divSection”).find([selector]) </li></ul><...
Traversing <ul><li>Get all next node: </li></ul><ul><li>$(“#m_txtName”).nextAll([selector]) </li></ul><ul><li>Get previous...
<ul><li>All of the methods in this chapter manipulate the DOM in some manner. A few of them simply change one of the attri...
Events <ul><li>.bind() </li></ul><ul><li>Ex:  $('#foo').bind({ </li></ul><ul><li>click: function() { // do something on cl...
Effects <ul><li>.slideUp() </li></ul><ul><li>.delay() </li></ul><ul><li>.slideDown() </li></ul><ul><li>.fadeIn() </li></ul...
AJAX <ul><li>jQuery.ajax() </li></ul><ul><li>$.ajax({ url: 'ajax/test.html', success: function(data) { </li></ul><ul><li>$...
jQuery UI <ul><li>Interactions </li></ul><ul><ul><li>Draggabble </li></ul></ul><ul><ul><li>Droppable </li></ul></ul><ul><u...
<ul><li>Live Query utilizes the power of jQuery selectors by binding events or firing callbacks for matched elements auto-...
Assignment <ul><li>1) Create a new Javascript file called “main.js” and properly import it into the HTML document. </li></...
Assignment <ul><li>7) Create a new input button in the HTML document at the bottom of the page, it should be </li></ul><ul...
<ul><li>Thank you </li></ul>
Upcoming SlideShare
Loading in …5
×

J Query Public

920 views

Published on

jQuery and JSON

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
920
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • RUE: Gives responses initiatively and quickly. Things happens naturally. AJAX: • Pros Most viable RIA technology so far Tremendous industry momentum Several toolkits and frameworks are emerging No need to download code &amp; no plug-in required • Cons Still browser incompatibility JavaScript is hard to maintain and debug
  • J Query Public

    1. 1. AJAX, JSON, jQuery, livequery <ul><li>Pradeep Kumar Silamkoti </li></ul>
    2. 2. Agenda <ul><li>AJAX </li></ul><ul><li>JSON </li></ul><ul><li>jQuery and livequery </li></ul><ul><li>Payment central </li></ul>
    3. 3. AJAX <ul><li>Rich User Experience </li></ul><ul><li>Rich internet applications (RIA) </li></ul><ul><li>AJAX = DHTML + Asynchronous communication using XMLHttpRequest </li></ul><ul><li>Asynchronous communication replaces &quot;synchronous request/response model.&quot; </li></ul>
    4. 4. Technologies used in AJAX <ul><li>• Javascript </li></ul><ul><li>Loosely typed scripting language </li></ul><ul><li>JavaScript function is called when an event in a page occurs </li></ul><ul><li>Glue for the whole AJAX operation </li></ul><ul><li>• DOM </li></ul><ul><li>API for accessing and manipulating structured documents </li></ul><ul><li>Represents the structure of XML and HTML documents </li></ul><ul><li>• CSS </li></ul><ul><li>Allows for a clear separation of the presentation style from the </li></ul><ul><li>content and may be changed programmatically by JavaScript </li></ul><ul><li>• XMLHttpRequest </li></ul><ul><li>JavaScript object that performs asynchronous interaction with the </li></ul><ul><li>server </li></ul>
    5. 5. Anatomy of AJAX Interaction
    6. 6. <ul><li>What is JSON? </li></ul><ul><li>Why we use JSON? </li></ul><ul><li>JSON structure </li></ul><ul><li>JSON Object </li></ul><ul><li>JSON text to JSON object and vice-versa in JavaScript </li></ul><ul><li>JSONObject Java class </li></ul><ul><li>JSON - RPC </li></ul>JSON
    7. 7. <ul><li>jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript. </li></ul><ul><li>Selectors </li></ul><ul><li>Attributes </li></ul><ul><li>Traversing </li></ul><ul><li>Manipulation </li></ul><ul><li>Events </li></ul><ul><li>Ajax </li></ul><ul><li>Utilities </li></ul>jQuery
    8. 8. <ul><li>jQuery selectors are used for selecting the area of the document where we want to apply styles. </li></ul><ul><li>Uses XPath and CSS </li></ul><ul><ul><li>$('p') —Accesses all the paragraph elements in the HTML file </li></ul></ul><ul><ul><li>$('div') —Accesses all the div elements in the HTML file </li></ul></ul><ul><ul><li>$('#A') —Accesses all the HTML elements with id=A </li></ul></ul><ul><ul><li>$('.b') —Accesses all the HTML elements with class=b </li></ul></ul><ul><ul><li>Ex: </li></ul></ul><ul><ul><li>$(document).ready(function() { </li></ul></ul><ul><ul><li>$('p').addClass('highlight'); </li></ul></ul><ul><ul><li>}); </li></ul></ul>Selectors
    9. 9. Selectors <ul><li>Get document element by tag: </li></ul><ul><li>$(document) </li></ul><ul><li>Get all element by tag name: </li></ul><ul><li>$(“input”) </li></ul><ul><li>$(“table”) </li></ul><ul><li>$(“div”) </li></ul><ul><li>Get all elements by exact element id: </li></ul><ul><li>$(“#m_tableAccountDetails”) </li></ul><ul><li>Class selector: </li></ul><ul><li>$(“.className”) </li></ul>
    10. 10. Selectors <ul><li>Get a specific element where ID like “m_tabel”: </li></ul><ul><li>$(“table[id*=m_table]”) </li></ul><ul><li>Attribute filters: </li></ul><ul><li>= equal to </li></ul><ul><li>!= not equal to </li></ul><ul><li>*= contains given substring </li></ul><ul><li>^= starts with string </li></ul><ul><li>|= starts with given string or starts with string and ‘-‘ </li></ul><ul><li>$= ends with </li></ul><ul><li>Multiple selector: </li></ul><ul><li>$(“input[id*=DescriptionBlock][type=text]”) </li></ul>
    11. 11. Selectors <ul><li>More selectors: </li></ul><ul><li>Visibility/content </li></ul><ul><li>:hidden :visible :enable :disable :checked :selected </li></ul><ul><li>Form </li></ul><ul><li>:input :text :password :radio :checkbox </li></ul><ul><li>:submit :image :reset :button :file </li></ul><ul><li>Child </li></ul><ul><li>:nth-child(index) :first-child :last-child :only-child </li></ul>
    12. 12. <ul><li>Methods get and set DOM attributes of elements. </li></ul><ul><li>.addClass() </li></ul><ul><li>.attr() </li></ul><ul><li>.hasClass() </li></ul><ul><li>.html() </li></ul><ul><li>.text() </li></ul><ul><li>.val() </li></ul>Attributes
    13. 13. Attributes <ul><li>Add Remove attribute: </li></ul><ul><li>$(“div”).attr(“style”,” border-style:solid”); </li></ul><ul><li>$(“div”).removeAttr(“style”); </li></ul><ul><li>Get attribute: </li></ul><ul><li>$(“div”).attr(“style”); </li></ul><ul><li>Add Remove Class: </li></ul><ul><li>$(“div”).addClass(“red”); </li></ul><ul><li>$(“div”).removeClass(“red”); </li></ul><ul><li>Has Class: (true/false) </li></ul><ul><li>$(“div”).hasClass(“red”); </li></ul>
    14. 14. Attributes <ul><li>Toggle Class: </li></ul><ul><li>$(“div”).toggleClass(“red”); </li></ul><ul><li>GetSet HTML: </li></ul><ul><li>$(“div”).html(); </li></ul><ul><li>var html_value = “<div id=’m_dv’>New Div</>”; </li></ul><ul><li>$(“div”).html(html_value); </li></ul><ul><li>GetSet value: </li></ul><ul><li>$(“input[id*=txtName]”).val(); </li></ul><ul><li>$(“ input[id*=txtName]”).val(“Example”); </li></ul>
    15. 15. <ul><li>.add() </li></ul><ul><li>.addSelf() </li></ul><ul><li>.children() </li></ul><ul><li>.find() </li></ul><ul><li>.first() </li></ul><ul><li>.next() </li></ul><ul><li>.parent() </li></ul><ul><li>.prev() </li></ul><ul><li>.siblings() </li></ul><ul><li>.slice() </li></ul>Traversing
    16. 16. Traversing <ul><li>Find elements under a parent element: </li></ul><ul><li>$(“#m_divSection”).find([selector]) </li></ul><ul><li>Get children: </li></ul><ul><li>$(“#m_divSection”).children([selector]) </li></ul><ul><li>Get first or first matching parent: </li></ul><ul><li>$(“#m_txtName”).parent([selector]) </li></ul><ul><li>Get parents by selector: </li></ul><ul><li>$(“#m_txtName”).parents([selector]) </li></ul><ul><li>Get next node: </li></ul><ul><li>$(“#m_txtName”).next([selector]) </li></ul>
    17. 17. Traversing <ul><li>Get all next node: </li></ul><ul><li>$(“#m_txtName”).nextAll([selector]) </li></ul><ul><li>Get previous node: </li></ul><ul><li>$(“#m_txtName”).prev([selector]) </li></ul><ul><li>Get all previous node: </li></ul><ul><li>$(“#m_txtName”).prevAll([selector]) </li></ul><ul><li>Get siblings: </li></ul><ul><li>$(“#m_txtName”).sibling([selector]) </li></ul>
    18. 18. <ul><li>All of the methods in this chapter manipulate the DOM in some manner. A few of them simply change one of the attributes of an element, while others set an element’s style properties. Still others modify entire elements (or groups of elements) themselves—inserting, copying, removing, and so on. </li></ul><ul><li>.append() </li></ul><ul><li>Ex: $(&quot;p&quot;).append(&quot;<strong>Hello</strong>&quot;); </li></ul><ul><li>.clone() </li></ul><ul><li>.detach() </li></ul><ul><li>Ex: $(&quot;p&quot;).detach(); </li></ul><ul><li>.empty() </li></ul><ul><li>.removeAttr() </li></ul>Manipulation
    19. 19. Events <ul><li>.bind() </li></ul><ul><li>Ex: $('#foo').bind({ </li></ul><ul><li>click: function() { // do something on click }, </li></ul><ul><li>mouseenter: function() { // do something on mouseenter } }); </li></ul><ul><li>.click() </li></ul><ul><li>.submit() </li></ul><ul><li>.ready() </li></ul><ul><li>.trigger() </li></ul>
    20. 20. Effects <ul><li>.slideUp() </li></ul><ul><li>.delay() </li></ul><ul><li>.slideDown() </li></ul><ul><li>.fadeIn() </li></ul><ul><li>.hide() </li></ul><ul><li>.show() </li></ul><ul><li>Ex: $('#foo').slideUp(300).delay(800).fadeIn(400); </li></ul><ul><li>$('#book').slideDown('slow', function() { // Animation complete. }); </li></ul>
    21. 21. AJAX <ul><li>jQuery.ajax() </li></ul><ul><li>$.ajax({ url: 'ajax/test.html', success: function(data) { </li></ul><ul><li>$('.result').html(data); alert('Load was performed.'); </li></ul><ul><li>} }); </li></ul><ul><li>Callback functions: beforeSend ,  error ,  dataFilter ,  success  and  complete </li></ul><ul><li>.ajaxComplete() </li></ul><ul><li>.ajaxError() </li></ul><ul><li>.ajaxSuccess() </li></ul><ul><li>jQuery.getJSON() </li></ul><ul><li>jQuery.getJSON( url, [ data ], [ callback(data, textStatus) ] ) </li></ul>
    22. 22. jQuery UI <ul><li>Interactions </li></ul><ul><ul><li>Draggabble </li></ul></ul><ul><ul><li>Droppable </li></ul></ul><ul><ul><li>Resizable </li></ul></ul><ul><ul><li>Selectable </li></ul></ul><ul><ul><li>Sortable </li></ul></ul><ul><li>Widgets </li></ul><ul><ul><li>Autocomplete </li></ul></ul><ul><ul><li>Accordian </li></ul></ul><ul><ul><li>Button </li></ul></ul><ul><ul><li>Dialog </li></ul></ul><ul><ul><li>Datepicker </li></ul></ul><ul><li>Effects </li></ul>
    23. 23. <ul><li>Live Query utilizes the power of jQuery selectors by binding events or firing callbacks for matched elements auto-magically, even after the page has been loaded and the DOM updated. </li></ul><ul><li>For example you could use the following code to bind a click event to all A tags, even any A tags you might add via AJAX. </li></ul><ul><li>$('a') .livequery('click', function(event) { </li></ul><ul><li> alert('clicked'); </li></ul><ul><li>return false; </li></ul><ul><li>}); </li></ul>Livequery
    24. 24. Assignment <ul><li>1) Create a new Javascript file called “main.js” and properly import it into the HTML document. </li></ul><ul><li>2) In main.js, write the code to make a Javascript alert pop up when the pages loads saying </li></ul><ul><li>“ Thank you for visiting my site.” </li></ul><ul><li>3) In main.js, write the code to make the input button labeled #hide, when clicked, hide all <ul> </li></ul><ul><li>elements on the page. </li></ul><ul><li>4) In main.js, write the code to make the input button labeled #show, when clicked, show all <ul> </li></ul><ul><li>elements on the page. </li></ul><ul><li>5) In main.js, write the code to hide the elements labeled #more_1 #more_2 and #more_3 when </li></ul><ul><li>the document is loaded. </li></ul><ul><li>6) Create a new “Read More” input buttons in the HTML document for each blog post. In </li></ul><ul><li>main.js, write the code that enables the buttons to toggle their respective #more_1 #more_2 </li></ul><ul><li>and #more_3 elements. </li></ul>
    25. 25. Assignment <ul><li>7) Create a new input button in the HTML document at the bottom of the page, it should be </li></ul><ul><li>labeled “Change Color”. When the button is clicked, all text on the page should be changed </li></ul><ul><li>to the color red. HINT: To select all of the elements on the page in jQuery, use the asterisk: </li></ul><ul><li>$(“*”) </li></ul><ul><li>8) Write the code in main.js so that when the page is loaded, an <hr /> element is appended to </li></ul><ul><li>each blog post element. </li></ul><ul><li>9) Demonstrate various effects using jQuery </li></ul><ul><li>10) Demonstrate calendar functionality using jQuery </li></ul>
    26. 26. <ul><li>Thank you </li></ul>

    ×