background preloader

JQuery

Facebook Twitter

Javascript. jQuery From Scratch: Functions » ShopDev Website Design Blog. This is part 2 of the “jQuery From Scratch” series of tutorials.

jQuery From Scratch: Functions » ShopDev Website Design Blog

If you have not read part 1, you can have a quick read. This tutorial will deal with writing and executing functions in JavaScript. jQuery does not provide a quick method for creating functions. That’s because it doesn’t need to. So what are functions? Say that you have a block of code that you would like executed on multiple events. Creating Functions To create a function called “aFunction”, we could write: Say that we wanted to alert the user each time this function is executed.

Function aFunction() { alert("Hello World! ") In this example, the user is alerted each time the function is executed. Executing Functions We can execute the function when any event is triggered. $(document).ready(function() { aFunction();}); This is pretty straightforwards… but there’s more to functions. Passing Arguments We can pass values into the function that are used when the code is executed.

Function aFunction(msg) { alert(msg);}

References

How To. Mobile. Plugins. Basics. Tips & Tricks. The Difference Between jQuery’s .bind(), .live(), and .delegate() - Alfa Jango Blog. 01 February 2011 The difference between .bind(), .live(), and .delegate() is not always apparent.

The Difference Between jQuery’s .bind(), .live(), and .delegate() - Alfa Jango Blog

Having a clear understanding of all the differences, though, will help us write more concise code and prevent bugs from popping up in our interactive applications. The jQuery team have announced in v1.7 a new method for binding events called on. This method combines the functionality of live, bind, and delegate described below, allowing you to specify the binding method based the arguments passed rather than by using different function names.

The basics The DOM tree First, it helps to visualize the DOM tree of an HTML document. Event bubbling (aka event propagation) When we click a link, it fires the click event on the link element, which triggers any functions we bound to that element's click event. $('a').bind('click', function() { alert("That tickles! ") So a click will trigger the alert. In the context of manipulating the DOM, document is the root node. Using jQuery Grid With ASP.NET MVC. Tim Davis posted an updated version of this solution on his blog.

Using jQuery Grid With ASP.NET MVC

His includes the following: jqGrid 3.8.2 .NET 4.0 Updates VS2010 jQuery 1.4.4 jQuery UI 1.8.7 Continuing in my pseudo-series of posts based on my ASP.NET MVC Ninjas on Fire Black Belt Tips Presentation at Mix (go watch it!) , this post covers a demo I did not show because I ran out of time. It was a demo I held in my back pocket just in case I went too fast and needed one more demo. A common scenario when building web user interfaces is providing a pageable and sortable grid of data. After creating a standard ASP.NET MVC project, the first step was to download the plugin and to unzip the contents to my scripts directory per the Installation instructions. jquery-grid-scripts For the purposes of this demo, I’ll just implement this using the Index controller action and view within the HomeController.

With the scripts in place, go to the Index view and add the proper call to initialize the jQuery grid. Jquery-grid-demo.