jQuery is a JavaScript library that simplifies HTML document traversal, event handling, animating, and Ajax interactions. It is lightweight, cross-browser compatible, and used on over 41% of popular websites. This document provides an introduction and overview of jQuery selectors, DOM manipulation, events, effects, and Ajax capabilities in 3 sentences or less per topic.
jQuery is a JavaScript library which allows you to develop solutions with less code, in less time. You can build interactive prototypes for your prospective clients, or take an existing solution and add new dynamic behaviour with little effort.
We will see how jQuery can be used to quickly and concisely apply JavaScript behaviour to your web app. It will cover selectors, Ajax, DOM manipulation and more. The aim: to produce lean unobtrusive JavaScript with jQuery.
jQuery is a JavaScript library which allows you to develop solutions with less code, in less time. You can build interactive prototypes for your prospective clients, or take an existing solution and add new dynamic behaviour with little effort.
We will see how jQuery can be used to quickly and concisely apply JavaScript behaviour to your web app. It will cover selectors, Ajax, DOM manipulation and more. The aim: to produce lean unobtrusive JavaScript with jQuery.
Things you should know about jQuery JavaScript library. A JavaScript library designed to hide painful cross-browser compatibility issues while presenting a solid, usable, API.
Writing code as an individual and writing code as part of the team are two very different things. Learn the tips and tricks for writing JavaScript code as part of the team so that your code will continue to work for years to come.
Things you should know about jQuery JavaScript library. A JavaScript library designed to hide painful cross-browser compatibility issues while presenting a solid, usable, API.
Writing code as an individual and writing code as part of the team are two very different things. Learn the tips and tricks for writing JavaScript code as part of the team so that your code will continue to work for years to come.
Mobile applications Development - Lecture 12
Javascript
jQuery (Zepto)
useful microframeworks
This presentation has been developed in the context of the Mobile Applications Development course at the Computer Science Department of the University of LâAquila (Italy).
http://www.di.univaq.it/malavolta
In this intro-level session on utilizing jQuery with SharePoint, the focus will be to empower users on how to satisfy some of the common UI changes clients request by writing clean and unobtrusive Javascript with the help of the jQuery library. We'll begin by diving into the different ways that jQuery can be hooked up to SharePoint. We'll talk about CDN versus local copies of the library, as well as linking jQuery via masterpages, custom actions, content editor web parts, and more.
We'll then spend time discussing css selectors, and some of the common patterns and jQuery methods you'll want to familiarize yourself with when targeting page-level elements. After that, the remainder of the presenation will be focused on walking through real-life scenarios of altering the UI with jQuery, such as adding interaction and animation to content query webparts, changing the behavior of links inside a page, and more. The code utilized in the presentation will be made available online after the Conference is completed.
Presents:
Introduction and Using jQuery
Selectors and Attributes
Events
Height and Width
DOM Manipulation and Modification
Effects and Animation
Store arbitrary data and add your functions.
Ajax
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Albert Hoitingh
Â
In this session I delve into the encryption technology used in Microsoft 365 and Microsoft Purview. Including the concepts of Customer Key and Double Key Encryption.
Generating a custom Ruby SDK for your web service or Rails API using Smithyg2nightmarescribd
Â
Have you ever wanted a Ruby client API to communicate with your web service? Smithy is a protocol-agnostic language for defining services and SDKs. Smithy Ruby is an implementation of Smithy that generates a Ruby SDK using a Smithy model. In this talk, we will explore Smithy and Smithy Ruby to learn how to generate custom feature-rich SDKs that can communicate with any web service, such as a Rails JSON API.
Connector Corner: Automate dynamic content and events by pushing a buttonDianaGray10
Â
Here is something new! In our next Connector Corner webinar, we will demonstrate how you can use a single workflow to:
Create a campaign using Mailchimp with merge tags/fields
Send an interactive Slack channel message (using buttons)
Have the message received by managers and peers along with a test email for review
But thereâs more:
In a second workflow supporting the same use case, youâll see:
Your campaign sent to target colleagues for approval
If the âApproveâ button is clicked, a Jira/Zendesk ticket is created for the marketing design team
Butâif the âRejectâ button is pushed, colleagues will be alerted via Slack message
Join us to learn more about this new, human-in-the-loop capability, brought to you by Integration Service connectors.
And...
Speakers:
Akshay Agnihotri, Product Manager
Charlie Greenberg, Host
UiPath Test Automation using UiPath Test Suite series, part 4DianaGray10
Â
Welcome to UiPath Test Automation using UiPath Test Suite series part 4. In this session, we will cover Test Manager overview along with SAP heatmap.
The UiPath Test Manager overview with SAP heatmap webinar offers a concise yet comprehensive exploration of the role of a Test Manager within SAP environments, coupled with the utilization of heatmaps for effective testing strategies.
Participants will gain insights into the responsibilities, challenges, and best practices associated with test management in SAP projects. Additionally, the webinar delves into the significance of heatmaps as a visual aid for identifying testing priorities, areas of risk, and resource allocation within SAP landscapes. Through this session, attendees can expect to enhance their understanding of test management principles while learning practical approaches to optimize testing processes in SAP environments using heatmap visualization techniques
What will you get from this session?
1. Insights into SAP testing best practices
2. Heatmap utilization for testing
3. Optimization of testing processes
4. Demo
Topics covered:
Execution from the test manager
Orchestrator execution result
Defect reporting
SAP heatmap example with demo
Speaker:
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
Epistemic Interaction - tuning interfaces to provide information for AI supportAlan Dix
Â
Paper presented at SYNERGY workshop at AVI 2024, Genoa, Italy. 3rd June 2024
https://alandix.com/academic/papers/synergy2024-epistemic/
As machine learning integrates deeper into human-computer interactions, the concept of epistemic interaction emerges, aiming to refine these interactions to enhance system adaptability. This approach encourages minor, intentional adjustments in user behaviour to enrich the data available for system learning. This paper introduces epistemic interaction within the context of human-system communication, illustrating how deliberate interaction design can improve system understanding and adaptation. Through concrete examples, we demonstrate the potential of epistemic interaction to significantly advance human-computer interaction by leveraging intuitive human communication strategies to inform system design and functionality, offering a novel pathway for enriching user-system engagements.
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf91mobiles
Â
91mobiles recently conducted a Smart TV Buyer Insights Survey in which we asked over 3,000 respondents about the TV they own, aspects they look at on a new TV, and their TV buying preferences.
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Jeffrey Haguewood
Â
Sidekick Solutions uses Bonterra Impact Management (fka Social Solutions Apricot) and automation solutions to integrate data for business workflows.
We believe integration and automation are essential to user experience and the promise of efficient work through technology. Automation is the critical ingredient to realizing that full vision. We develop integration products and services for Bonterra Case Management software to support the deployment of automations for a variety of use cases.
This video focuses on the notifications, alerts, and approval requests using Slack for Bonterra Impact Management. The solutions covered in this webinar can also be deployed for Microsoft Teams.
Interested in deploying notification automations for Bonterra Impact Management? Contact us at sales@sidekicksolutionsllc.com to discuss next steps.
Essentials of Automations: Optimizing FME Workflows with ParametersSafe Software
Â
Are you looking to streamline your workflows and boost your projectsâ efficiency? Do you find yourself searching for ways to add flexibility and control over your FME workflows? If so, youâre in the right place.
Join us for an insightful dive into the world of FME parameters, a critical element in optimizing workflow efficiency. This webinar marks the beginning of our three-part âEssentials of Automationâ series. This first webinar is designed to equip you with the knowledge and skills to utilize parameters effectively: enhancing the flexibility, maintainability, and user control of your FME projects.
Hereâs what youâll gain:
- Essentials of FME Parameters: Understand the pivotal role of parameters, including Reader/Writer, Transformer, User, and FME Flow categories. Discover how they are the key to unlocking automation and optimization within your workflows.
- Practical Applications in FME Form: Delve into key user parameter types including choice, connections, and file URLs. Allow users to control how a workflow runs, making your workflows more reusable. Learn to import values and deliver the best user experience for your workflows while enhancing accuracy.
- Optimization Strategies in FME Flow: Explore the creation and strategic deployment of parameters in FME Flow, including the use of deployment and geometry parameters, to maximize workflow efficiency.
- Pro Tips for Success: Gain insights on parameterizing connections and leveraging new features like Conditional Visibility for clarity and simplicity.
Weâll wrap up with a glimpse into future webinars, followed by a Q&A session to address your specific questions surrounding this topic.
Donât miss this opportunity to elevate your FME expertise and drive your projects to new heights of efficiency.
DevOps and Testing slides at DASA ConnectKari Kakkonen
Â
My and Rik Marselis slides at 30.5.2024 DASA Connect conference. We discuss about what is testing, then what is agile testing and finally what is Testing in DevOps. Finally we had lovely workshop with the participants trying to find out different ways to think about quality and testing in different parts of the DevOps infinity loop.
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...James Anderson
Â
Effective Application Security in Software Delivery lifecycle using Deployment Firewall and DBOM
The modern software delivery process (or the CI/CD process) includes many tools, distributed teams, open-source code, and cloud platforms. Constant focus on speed to release software to market, along with the traditional slow and manual security checks has caused gaps in continuous security as an important piece in the software supply chain. Today organizations feel more susceptible to external and internal cyber threats due to the vast attack surface in their applications supply chain and the lack of end-to-end governance and risk management.
The software team must secure its software delivery process to avoid vulnerability and security breaches. This needs to be achieved with existing tool chains and without extensive rework of the delivery processes. This talk will present strategies and techniques for providing visibility into the true risk of the existing vulnerabilities, preventing the introduction of security issues in the software, resolving vulnerabilities in production environments quickly, and capturing the deployment bill of materials (DBOM).
Speakers:
Bob Boule
Robert Boule is a technology enthusiast with PASSION for technology and making things work along with a knack for helping others understand how things work. He comes with around 20 years of solution engineering experience in application security, software continuous delivery, and SaaS platforms. He is known for his dynamic presentations in CI/CD and application security integrated in software delivery lifecycle.
Gopinath Rebala
Gopinath Rebala is the CTO of OpsMx, where he has overall responsibility for the machine learning and data processing architectures for Secure Software Delivery. Gopi also has a strong connection with our customers, leading design and architecture for strategic implementations. Gopi is a frequent speaker and well-known leader in continuous delivery and integrating security into software delivery.
2. Agenda What is jQuery Getting Started the famous $ sign selectors and managing wrapped set Manipulating attributes, class, content for elements DOM traversal and manipulation some utility functions effects provided by jQuery core events and getting close to unobtrusive JavaScript template Ajax jQueryPlugin jQuery UI jQuery Mobile
3. What is jQuery Per their website, âjQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.â It was first released in Jan 2006, current release is 1.4.4 Lightweight (24KB), CSS3 compliant, Cross Browser A separate UI library and Mobile Library Used by over 41% of the 10,000 most visited websites (majors like Google, Dell, Bank of America, NBC, Netflix ⊠) Supported by Microsoft as well ï Per http://trends.builtwith.com/, jQuery and jQuery UI constitute around 50% of all JS libraries used on the web
4. Other JS libraries SWFObject is a small Javascript file used for embedding Adobe Flash content (http://code.google.com/p/swfobject/ ) Prototype : http://www.prototypejs.org/ The Yahoo! User Interface (YUI) Library : http://developer.yahoo.com/yui/ script.aculo.us : http://script.aculo.us/ MooTools : http://mootools.net/ Google Mashup Editor (GME) : retired but still in use http://code.google.com/gme/
5. jQuery Resources http://jquery.com/ : this is the core website. http://docs.jquery.com/Main_Page : developerâs starting page http://docs.jquery.com/Tutorials : tutorials http://plugins.jquery.com/ : plugin repository http://jqueryui.com/ : the UI library http://jquerymobile.com/ : the mobile framework http://www.manning.com/bibeault/ : best book on jQuery (in my opinion)
6. Getting Started What you will need : Core library (comes as MIN and FULL versions) Download from http://docs.jquery.com/Downloading_jQuery Use CDN hosted files (MS, Google, jQuery) Visual Studio Intellisense Support Download from http://code.jquery.com/jquery-1.4.1-vsdoc.js UI Download from http://jqueryui.com/download This gives you js PLUS css Mobile Download from http://jquerymobile.com/download/ You will need js PLUS css Now that you have the JS and CSS, refer to them and lets get started !!! <script type="text/javascript" src="jquery.js"></script>
7.
8. You can use either jQuery OR $ to refer to the library
12. Selectors Used to select element(s) from DOM based on âselection criteriaâ Gets us âwrapped setâ of matching elements $( selector, <context>) selector defines the matching criteria Context is optional parameter to restrict are where to match and is a selector in itself. By default, context is the entire document Various types of selectors CSS Child, Attributes, Container Position Custom $(âimgâ) â will select all images in the DOM $(âimgâ, â#containerDivâ) â will select all images present in the element by name containerDiv
13. CSS Selectors $(âaâ) This selector matches all link (<a>) elements. $(â#specialIDâ) This selector matches elements that have an id of specialID $(â.specialClassâ) This selector matches elements that have the class of specialClass $(â a#specialID.specialClassâ) This selector matches links with an id of specialID and a class of specialClass $(âp a.specialClassâ) This selector matches links with a class of specialClass declared within <p> elements. $("div,span,p.myClass") selects all divs, spans and paragraphs which have class myClass
14. Child, attributes, container selectors $(âp > aâ) matches links that are direct children of a <p> element $("a[href^='http://']") matches links that start with http:// $("a[href$='.pdf']") matches links that end with .pdf $("a[href*='google.com']") matches links that contain google.com $("a[href='append.htm']") matches links that point to append.html li:has(a) matches all <li> elements that contain an <a>
15. Position selectors $("td:first") first td of the context (will select single element) $("td:lastâ) last td of the context (will select single element) $("td:evenâ) all even td of the context $("td:oddâ) all odd td in the context $("td:eq(5)â) 6th td in the context (index from 0) $("td:gt(5)â) 7th to last td in the context (index from 0) $("td:lt(5)â) 1st to 5th td in the context (index from 0) $("td:first-childâ) first td of each row (will select first column) $("td:last-childâ) last td of each row (will select last column) $("td:nth-child(3)â) 3rd td of each row (will select 3rd column, index from 1) $("td:nth-child(even)â) all even td in each row (will select all even columns) $("td:nth-child(odd)â) all odd td in each row (will select all odd columns)
16. Custom selectors $(âinput:checkboxâ) all checkboxes $(âinput:radio:checkedâ) all radiobuttons that are checked $(âinput:checkbox:not(:checked):enabledâ) all checkboxes that are not checked and are enabled
17. Managing wrapped set $("td").get(0) gets 1st element from wrapped set (index from 0) $("td").toArray()[1] converts wrapped set to array of elements and gets 2nd element $("td").eq(2) gets 3rd element from wrapped set but as wrapped element. $("td").first() gets first element from wrapped set but as wrapped element. $("td").last() gets last element from wrapped set but as wrapped element. $("td").size() gets the size of the wrapped set $('img').index($('#findMe')) gets the index of image with ID findMe in the set of all images $('img[alt]').add('img[title]') <img> elements that have either an alt or a title $('img[title]').not('[title*=puppy]') gets all images with have title but not containing puppy $("input:checkbox").filter(":checked") filters list of all checkboxes to give only the ones that are checked $("li").filter(".dummyClass").hide().end().addClass("selectedItem") hide the li with dummy class and add selectedItem class to all li
18. .each() each(iterator) Traverses all elements in the matched set invoking the passed iterator function for each. iterator (Function) A function called for each element in the matched set. The parameter passed to this function is set to the zero-based index of the element within the set, and the element itself is available as the this property of the function. Returns wrapped set (important for chaining) $('img').each(function(n){ this.alt='This is image['+n+'] with an id of '+this.id; });
19. Attributes $("#txtDemo").attr("data-custom") gets the value of attribute "data-custom" $("#txtDemo").removeAttr("data-custom") removes the attribute "data-custom" $("#txtDemo").attr("data-custom", "updated value for attribute") sets value of attribute "data-custom" to updated value for attribute" this can be used to add an attribute OR update the value of existing attribute $("#txtDemo").attr({ title: 'updated value for title', value: 'content changed as well', 'data-custom' : 'updated value of custom attrib again' }) sets multiple attributes $("input:checkbox").removeAttr('disabled'); enables all checkbox $("input:checkbox").attr('disabled', true); disables all checkoxes $("a[href^=http://]").attr("target","_blank") all links starting with http will open in new window
20. Styling $("#trFirstRow").addClass("selectedItem") add class selectedItem to trFirstRow $("#trFirstRow").removeClass("selectedItem") remove class selectedItem to trFirstRow $("#trFirstRow").addClass("customClass") add class customClass to trFirstRow $("#trFirstRow").removeClass("customClass") remove class customClass to trFirstRow $("#trFirstRow").toggleClass("customClass") toggles the class customClass to trFirstRow (add if not present, remove if present) $("#trFirstRow").css({border: '1px solid Black',background: 'Blue',color: 'White'}) add multiple css attributes $("#trFirstRow").css("background-color") gets the css attribute's value $("#trFirstRow").height(80) sets height $("#trFirstRow").width() gets width
21. Content $("#demoDiv").html() gets the html content of the div (formatting info as well) $("#demoDiv").html("This is a formatted <b>HTML</b> content which has some <i>random formatting.</i> updated") sets the html content of the div. So we will see HTML in bold $("#demoDiv").text() gets the content as text (no formatting information) $("#demoDiv").text("This is a formatted <b>HTML</b> content which has some <i>random formatting.</i> updated but as you see, formatting is gone"); sets text content of div. No formatting $("input:text").val("Updated the content ") ; VAL is only for form elements Sets the value of textboxes. .val() will get us the content $("input:button").eq(0).val("GET VALUE"); Sets the value of button (text that we see). .val() will get us the current content $("select").val("tiger"); selects the option with value tiger in the select control
22. Creating new element Html content within $(ââ) generates a new element which then needs to be added to DOM using append / prepend or any such method Flavors Specifying the full html : $('<p>This is a new paragraph</p>'); Specifying the attributes : $('<a/>', { html : 'This is a <strong>new</strong> link', 'class' : 'new', href : 'foo.html' });
23. Modifying the DOM tree $("#coffee").append("<li>" + $("#drinkName").val() + "</li>") <li id="coffee">Coffee</li> becomes <li id="coffee">Coffee<li>test</li></li> $("#coffee").prepend("<li>" + $("#drinkName").val() + "</li>"); <li id="coffee">Coffee</li> becomes <li id="coffee"><li>test</li>Coffee</li> $("#coffee").after("<li>" + $("#drinkName").val() + "</li>"); <li id="coffee">Coffee</li> becomes <li id="coffee">Coffee</li> <li>Test</li> $("#coffee").before("<li>" + $("#drinkName").val() + "</li>"); <li id="coffee">Coffee</li> becomes <li>Test</li> <li id="coffee">Coffee</li> $("#blackTea").remove(); removes the element from DOM $("#tea").clone().appendTo("#milk") clones tea and appends to milk $("#tea").wrap("<div></div>") adds a wrapper div element over tea (<div><li id="tea">Tea</li></div>)
24. DOM Traversal $("#subChildLI").children() gets all direct children $("#subChildLI").closest("tr") gets closest tr in DOM hierarchy $("#subChildLI").parent() gets immediate parent $("#subChildLI").parents("ul") gets all ul parents in DOM hierarchy (filtered) $("#subChildLI").parents() gets all parents in the DOM hierarchy $("#subChildLI").siblings() gets all siblings of selected element $("#subChildLI").prev() gets previous sibling $("#subChildLI").next() gets next sibling
25. Utility functions Functions we looked at so far operated on jQuery object if you will These are all in the $.fn namespace called on jQuery selections automatically receive and return the selection as this Another set of functions are called Utility methods These are in the $ namespace do not work with selections they are not automatically passed any arguments, and their return value will vary
26. Utility functions : browser support $.browser provides flags that help in determining the user agent $.browser.versiongives the version of the browserâs rendering engine $.browser.msie / firefox / opera / safari is set to true based on user agent $.cssFloat, $.opacity etc used to determine browserâs support for various capabilities $.boxModel Box model : true if the page is using the W3C standard box model and false if the page is using the Internet Explorer box model (traditional). Under the W3C box model, the size of the content of the element is 180 by 72 pixels exactly as specified by the width and height values. The padding and the border are applied outside this 180 by 72 pixel box, resulting in a total footprint of 210 by 102 pixels for the entire element. When the traditional box model is used, the entire element is rendered in the 180 by 72 pixel box defined by the width and height attributes, reducing the size of the content to 150 by 42 pixels
27. Utility functions (contd.) $.noConflict() sets $ free for usage by another library. Post this, use jQuery instead of $ $.paramconverts string / object to query string taking care of formatting and encoding Original object {firstName: 'Yogi',lastName: 'Bear',streetAddress: '123 Anywhere Lane',city: 'Austin',state: 'TX',postalCode: '78701'} serialized to query string firstName=Yogi&lastName=Bear&streetAddress=123+Anywhere+Lane&city=Austin&state=TX&postalCode=78701 $.makeArray(object) Converts the passed array-like object into a JavaScript array $.unique(array) Given an array of DOM elements, returns an array of the unique elements in the original array $.parseJSON(string) parses jsonString and gives object evaluating the string
28. Manipulating objects and collections $.trim(â text with spaces â) trims the string $.each(anyArray, function (n, value){ //here you get the index and value for each element }); $.each(anyObject, function (name, value){ //here you get name and value one by one }); $.inArray(56, originalArray) checks for number 56 as an element in the array. If present, returns the index ELSE returns -1
29.
30. varanotherGrepArray = $.grep(originalArray, function (value) { return value > 50; }, true); Note that the filter is works as an iterator calling the function for each row and adding to the result set IF function returns TRUE In the second approach, we have option to say if we want to invert the filtering Translate an array using $.map which applies a function to each element in the original array to get the result set varvaluesArray = $.map(stringArray, function (value) { var result = new Number(value); return isNaN(result) ? null : 5*result; });
31. Animations and effects For examples, we will refer to source code from the book : http://localhost/jqia2.source/chapter5/lab.effects.html Each of these methods optionally take a speed param â number in milliseconds or text like Slow, Normal, Fast call back function reference that will be invoked once effect is complete fadeTo needs opacity to be defined $(â#sampleDivâ).hide(âslowâ) hides the element $(â#sampleDivâ).show(âslowâ) shows the element $(â#sampleDivâ).toggle(âslowâ) toggles the visibility state of the element $(â#sampleDivâ).fadeIn(âslowâ) hidden element is shown by changing opacity $(â#sampleDivâ).fadeOut(âslowâ) element is hidden by changing opacity $(â#sampleDivâ).fadeTo(âslowâ, 0.5) changes the opacity to 0.5 $(â#sampleDivâ).slideUp(âslowâ) collapses the element $(â#sampleDivâ).slideDown(âslowâ) expands the element $(â#sampleDivâ).slideToggle(âslowâ) toggles the slide of the element
32. Creating custom effects animate(properties, speed) can be used to make custom effects Properties is an object specifying the target values for various css properties Speed specifies the time needed to reach this target state Additionally, we can specify callback as well $('.animateMe').each(function(){ $(this).animate( { width: $(this).width() * 2, height: $(this).height() * 2 }, 2000 ); });
33. Events Binding events, handling event object and passing data to events have been chaotic conventionally jQuery gives multiple handy ways to make this simpler Bind, unbind Inspect event instance Trigger When binding, we can bind multiple handlers in two ways Specifying all of them by bind() will fire them all when the event is triggered Using toggle() will fire them as if a circular list â each trigger picks up the next handler
34. Binding events Bind a function directly to the event bind method that takes event name(s), data to be passed to event handler and callback function (reference or inline definition) Many common events are present by name to be either specified in bind method OR use the first approach â blur, click, dblclick, change, focus etc Similar to bind(), one() can be used â this unbinds the handler after being called once Remove a handler by unbind() method $('p').click(function() { console.log('click');}); $('p').bind('click', function() { console.log('click');}) $('input').bind( 'click change', // bind to multiple events { foo : 'bar' }, // pass in data function(eventObject) { console.log(eventObject.type, eventObject.data); } );
35. Trigger events Broadly 3 ways Invoke the trigger() method which accepts event name and data Invoke triggerHandler() method which operates as trigger() BUT doenst propagate the event As seen with binding, we can call the event name directly for some methods â click(), blur(), focus() When binding, we can bind multiple handlers
36. Templates Helps create a HTML template that can be repeatedly used Plugin that you will need to download from https://github.com/jquery/jquery-tmpl/blob/master/jquery.tmpl.min.js Two small steps Define the markup and associate to a name Apply template When we pass an object, its properties can be accessed by ${NAME} When we pass a list, the template iterates over each object in the list <script id="summaryTemplate" type="text/x-jquery-tmpl"> <li>${Name}</li> </script> function renderList() { $( "#summaryTemplate" ).tmpl( movies ).appendTo( "#moviesList" ); //OR : $.tmpl( "summaryTemplate", movies ).appendTo( "#movieList" ); }
37. Ajax GET vs POST Use GET only for âgettingâ data, pass criteria as query string, typically gets cached Use POST for CUD (CRUD-R) Data types (for GET, this is return data, for POST this is send data) text, html, xml, json, jsonp, script Core method : $.ajax({}); url specifies the URL for get / post dataType specifies the type of data expected to be sent / received in POST / GET data specifies the data being POSTed. Can also be query string type specifies the type of call â POST / GET typically success is a pointer to the callback function when response is 200 OK error and complete are pointers to functions on error and complete â more like catch and finally in try-catch blocks. Convenience methods that default some of the properties : $.get, $.post, $.getJSON Accepturl (mandatory), data, dataType and success as params
38. Ajax GET varnoteData; function DemoLoadData() { $.ajax({ type: "GET", url: "http://localhost/NoteApp/NoteService/Service.svc/GetNoteData", cache: false, success: LoadDataSucceeded, error: LoadDataFailed }); } function LoadDataSucceeded(msg) { alert(msg); $("#jsonContainer").val(msg); noteData = JSON.parse(msg); } function LoadDataFailed(result) { alert(result.status + ' ' + result.statusText); }
39. Ajax POST function SaveNoteData() { varobjectData = JSON.stringify(noteData); $.ajax({ url: "http://localhost/NoteApp/NoteService/Service.svc/SaveNoteData", type: 'post', dataType: 'json', contentType: 'application/json; charset=utf-8', data: JSON.stringify(noteData), success: function (res) { alert(res); }, error: function (xhr) { if (xhr.responseText) { var err = JSON.parse(xhr.responseText); if (err) alert(err); else alert({ Message: "Unknown server error." }) } return; } }); }
40. Ajax convenience methods // get plain text or html $.get(âmyservice.svc/GetAllData', { employeeID: 1234 }, function(resp) { console.log(resp); }); // get JSON-formatted data from the server $.getJSON(' myservice.svc/GetAllDataJSON', function(resp) { $.each(resp, function(k, v) { console.log(k + ' : ' + v); }); });
41. jQuery Plug-in A new method that we use to extend jQuery's prototype object Can be used privately or shared with others Since extending prototype, it is available for all jQuery objects Guidelines Name the file as jquery.PLUGINNAME.js Name in file and your methodâs name should be same Keep track of developer community to avoid name conflicts ï Wrap the actual plugin in an immediately-invoked function: (function($){ //... }(jQuery)); Because of closure, this creates a "private" scope of $ hence allowing us to extend jQuery without risk of $ being overwritten by another library
42. jQuery Plug-in development Utility functions $.functionName = function(params){function-body}; Invoked as $.functionName(params) Wrapper methods These will operate on DOM and will need to support chaining $.fn.wrapperFunctionName = function(params){function-body}; Invoked as $(selector).functionName(params) (function ($) { $.fn.makeItBlueOrRed = function () { returnthis.each(function () { $(this).css('color', $(this).is('[id]') ? 'blue' : 'red'); }); }; })(jQuery); (function($){ $.say = function(what) { alert('I say '+what); } })(jQuery);
43. jQuery UI http://jqueryui.com/demos/ Use jQuery UI to get lot of available controls that can enhance the UI on your page The link takes you to demo page to show what is available from jQuery Beyond this, you can find much more by just searching for jQuery UI Plugins for almost anything you want
45. Third party controls An example : http://www.flexigrid.info/ Starting from as simple a code usage as $('.flexme').flexigrid();
46. jQuery Mobile http://jquerymobile.com/ The above URL takes you to the home of jQuery mobile framework Demo pages show what this can do Since mostly uses CSS3 / HTML5, IE 7 / 8 doesnât support this However IE9 and most of other browsers â Firefox, Safari, Opera â show this correctly Given that most of mobileâs web browsers are supporting this, we should be good to use the power of this framework
48. References http://docs.jquery.com/Plugins/Authoring http://nsreekanth.blogspot.com/search/label/JQuery%20plugin http://msdn.microsoft.com/en-gb/scriptjunkie/ee730275.aspx http://msdn.microsoft.com/en-gb/scriptjunkie/ff848255.aspx http://jqfundamentals.com/book/book.html http://nsreekanth.blogspot.com/search/label/JQuery%20plugin http://jquery.com/ : this is the core website. http://docs.jquery.com/Main_Page : developerâs starting page http://docs.jquery.com/Tutorials : tutorials http://plugins.jquery.com/ : plugin repository http://jqueryui.com/ : the UI library http://jquerymobile.com/ : the mobile framework http://www.manning.com/bibeault/ : best book on jQuery (in my opinion)
49. Thank You ï gunjankumar300@gmail.com http://in.linkedin.com/in/gunjankumar300