Fundamentals, Ajax, Templates, UI Doncho Minkov Telerik Corporation

 jQuery Fundamentals  What is jQuery?  Selection and DOM Manipulation  Events and Chaining  Ajax  Ajax Methods  Adding Ajax to a website  jQuery Templating  Microsoft’s jQuery Contributions  Templating Syntax and render method  jQuery UI 2

The world’s most popular JavaScript library 3

 jQuery is a cross-browser JavaScript library  jQuery is a cross-browser JavaScript library  Designed to simplify the client-side scripting of HTML  jQuery is the most popular JavaScript library in use today  Free, open source software  jQuery's syntax is designed to make it easier to  Navigate a document and select DOM elements  Create animations  Handle events  Develop Ajax applications

 jQuery also provides capabilities for developers to create plugins for  Low-level interaction and animation  Advanced effects and high-level, theme-able widgets  Creation of powerful and dynamic web pages  Microsoft adopted jQuary within Visual Studio for use within Microsoft's ASP.NET AJAX Framework and ASP.NET MVC Framework 5

 Easy to learn  Fluent programming style  Easy to extend  You create new jQuery plugins by creating new JavaScript functions  Powerful DOM Selection  Powered by CSS 3.0  Lightweight  Community Support  jQuery has a large community of developers and power users

 Download it   Self hosted  You can choose to self host files  This is including jQuary in the scripts folder in Visual Studio  Download and include it in your project  CDN - Microsoft, jQuery, Google

8 Selecting, Adding, Removing Elements

 With jQuery you typically find something, then do something with it  Syntax for finding items is the same as the syntax used in CSS to apply styles.  There are lots of different jQuary methods to do with the selected elements //finding the item $("#something").hide(); //doing something with the found item

 When selecting with jQuery you can end up with more than one element  Any action taken will typically affect all the elements you have selected //...$('.myClass').hide();//...

 With jQuery HTML adding elements can be done on the fly  Very easily  Can be added to the page  Still selecting something (brand new), then doing something. $('<ul><li>Hello</li></ul>').appendTo('body'); 11

// Before <div> Red Red Green Green </div> // Removing Elements $('p').remove(); 12  You can also remove elements from the DOM  Just as easy // After <div></div>

 With jQuery binding to events is very easy  We can specify a click handler  For example by using the click method.  The above example will bind the " myClickHandler " function to all anchors with a class of tab // Binding an event function() myClickHandler { // event handling code // event handling code $(this).css(‘color’, ‘red’); $(this).css(‘color’, ‘red’);};$('a.tab').click(myClickHandler); 13

 Functions in JavaScript do not have to have a name  This is the same exact functionality as the last slide  This is important because in the previous example we polluted the global scope with a new function name  Can be dangerous as someone could overwrite your function with their own accidentally 14 $('a.tab').click( function() { // event handling code // event handling code $(this).css('color', 'red'); $(this).css('color', 'red');});

 With jQuery many methods allow chaining  Chaining is where you can continue to "chain" on methods one after another.  As an example, the addClass method will add the class ' odd ' in the code below  Then return the jQuery collection  We can immediately chain on the " click " event  Click then operates on the odd rows by adding a click handler to each of them $('tr:odd').addClass('odd').click( function () {.click( function () { alert('you clicked a tr!'); alert('you clicked a tr!'); }); }); 15

 Some jQuery methods chain and return a new collection of elements  ' Find ' and ' Filter ' are two examples.  jQuery holds on to the previous collections, essentially creating a stack set to store them. 16

 Methods like Find and Filter create a new collection which is added to stack  Older collections are pushed further 'downward' on the stack  You can get a previous collection that was placed on the stack by using the end() method. 17 $(‘body’) // [body].find(‘p’) // [p, p, p] > [body].find(‘p’) // [p, p, p] > [body].find(‘a’) // [a, a] > [p, p, p] > [body].find(‘a’) // [a, a] > [p, p, p] > [body].addClass(‘foo’).addClass(‘foo’).end() // [p, p, p] > [body].end() // [p, p, p] > [body].end() // [body].end() // [body]

 This is a popular use that shows both chaining and the stack architecture. 18 $(‘tr’).filter(‘:odd’).filter(‘:odd’).addClass(‘myOddClass’).addClass(‘myOddClass’).end().end().filter(‘:even’).filter(‘:even’).addClass(‘myEvenClass’);.addClass(‘myEvenClass’);

 We first select all rows  Then filter to only the odd rows  The odd rows are placed on the top of the stack  The 'all rows' collection is now ‘pushed downward’  Add a class to the odd rows  We call end  Throws away our odd rows collection  Grabs the next element in the stack  The 'all rows' collection  We then filter to find even rows  We add a class to the even rows 19

 Not all methods can be chained  Some methods can operate as “getters”, which return an string  Example: calling.html() with no parameters gets the HTML inside an element as a string  You can’t chain after that as you now have a string 20 var html = $(...).html().addClass('hello') // Breaking, html() returns a string. // addClass method is undefined on a string

 Calling.html() with a string as the first parameter acts as a setter - which once the HTML is set, then the jQuery collection is returned  You can then continue to chain  Visual Studio 2010 Intellisense can help when figuring out whether or not you can chain!  You can also find out whether or not a methods chains by looking at api.jquery.com api.jquery.com  A method can be chained if the method returns "jQuery" 21 $(...).html(‘Hello world’).addClass(‘hello’)

Live Demo 22

 Can use jQuery Ajax to seamlessly integrate with other jQuery code  Makes asynchronous calls to the server using http simple  jQuery.ajax()  The core method  The shortcut methods use it 'under the hood'  Thus it can do everything  $.get() and $.post()  Set a single parameter  The HTTP Action that will occur is POST or GET

 $.getJSON  Uses the get HTTP action and inform the server to send JSON back  $(...).load()  gets HTML from the server and loads it into whatever you have selected  Note that there is no selection going on (except.load() )  With certain jQuery methods there is not a logical reason to make a selection first  Most Ajax methods fall into that category

 With ASP.NET MVC, you can return a portion of a view and add it to the page with load  $(...).load()  Gets HTML from the server and load it into whatever you have selected.  You could have the ASP.NET MVC server render a partial view, and return that with load!  Note that the server should return a partial page only  If it returns a whole page, then we are going to have some invalid HTML! 26 $(‘#myContainer’).load(‘home/myHtmlSnippet’);

 With ASP.NET you can return a JSONResult, which would work in cooperation with jQuery getJSON  When JSON returns, it is treated as a JavaScript object  jQuery expects a function and we can specify the function to use inline and never have to actually name the function 27 {“names”: [“Joe”, “Jim”, “Bob”]} $.getJSON(‘my/page/route’, function(json) { function(json) { $(‘body’) $(‘body’).append( json.names[0] );.append( json.names[0] ); }); });

28

 Open, transparent and collaborative  In the spirit of jQuery community  Specification, Proposals on jQuery Forums  Prototypes as Plugins in Github  Cool Stuff = Templating, Script Loader, Data- linking 29 Microsoft: Proposal, Specification, Prototype jQuery Core Team ASP.NET Ajax Library jQuery Plugins jQuery Core

30 var template = " ${dataItem} “; <li>${dataItem}</li></script> ${Name} ${Name} Price: ${formatPrice(Price)} Price: ${formatPrice(Price)} <img data-pk="${Id}" src="Content/AddCart.png" <img data-pk="${Id}" src="Content/AddCart.png" alt="Add to Cart" class="addCart" /> alt="Add to Cart" class="addCart" /> </script>

 Making the Template and inserting a templated element  The result is 31 ${ dataItem } ${ dataItem } </script>$("#myTemplate").render(dataObject).render(dataObject).appendTo("ul");.appendTo("ul"); <ul> Beer Beer </ul>

 Making the Template and inserting an array of elements  The result is 32 ${dataItem} ${dataItem} </script>$("#myTemplate").render(arrayOfDataObjects).render(arrayOfDataObjects).appendTo("ul");.appendTo("ul"); <ul> Beer_0 Beer_0 Beer_1 Beer_1 </ul>

Live Demo 33

 jQuery UI is a separate JavaScript file  jQuery UI contains three different areas of additions  Effects  Draggable, Droppable, Resizable, Selectable, Sortable  Interactions  Show & Hide additions, Color Animation, Easings  Widgets  Accordian, Autocomplete, Button, Datepicker, Dialog, Progressbar, Slider, Tabs

 Everything is theme-able!  Adding most widgets is very simple in code: 36 $(‘input:text.date’).datepicker()

 What is jQuery?  jQuery is a cross-browser JavaScript library  jQuery is a cross-browser JavaScript library  Easier to use than JavaScript  Selection and DOM Manipulation  How to find, select and remove elements  Events and Chaining  Binding events  Chaining methods  Chain breakers

Questions?