One of the biggest concerns I've heard mentioned from users of the Prototype library about jQuery is the lack of support for various array methods. The robust features Prototype provides for arrays is of great benefit to developers that do a lot of array manipulation in their JavaScript.

However, I find that after moving to jQuery, I do less array manipulation than I had done with Prototype. Perhaps jQuery has altered my development pattern so I no longer need array manipulation, or perhaps I have shifted most of my data manipulation to the server. Whatever the case, I have only on occasion missed the Prototype array methods.

While there is some overlap in the ways that jQuery and Prototype handle array manipulation, jQuery does a few things Prototype doesn't do, and Prototype does a number of things that jQuery doesn't. I began writing an article about these differences, but soon got side-tracked writing a jQuery plugin to mimic the array methods Prototype provides.

You can find the plugin at http://code.google.com/p/jquery-protify-js/

With this plugin, you can give a particular array all of the methods that Prototype adds to their Array and Enumerable objects. You can use the methods two different ways. The first does not extend the original array:

This will return an array extended with the Prototype library's methods, but leave the original array untouched.

The second extends the original array by passing in true as the second parameter:

In either case, the JavaScript Array prototype is untouched. When you create new arrays, it will not have the new methods. This way of writing code adds the new methods when they are needed while leaving the underlying JavaScript prototypes untouched. The return value of the methods is an array with the extended methods so that they can be chained.

The above code first returns the arr array values in a new array with the Prototype methods, removes any null/undefined values (using compact), finds all the values in the array greater than or equal to 3 and returns an extended array of them (using findAll), and finally returns the first value of that array (using first). It does all of this without touching the prototype for all arrays.

Here are some useful Prototype array methods included in the plugin:

all()

returns true if every member of the array == true and returns false if even one member != true.

any()

returns true if even one member of the array == true and returns false if every member != true.

map()

similiar to jQuery's $.map. It executes the function passed in on every of member of the array and returns an array of the results.

eachSlice(number)

slices the array into an array of arrays of the size passed in. There is an optional second parameter which is a function that acts on each array partition before placing it in the slice.

include(value)

returns true if the value is in the array (using == equality).

max()/min()

returns the maximum/minimum value of the array. Optional parameter is a function that can be used to define the comparison and what gets returned.

partition()

returns an array with two arrays in it. The first array contains the values that == true in the initial array, and the second all of the values != true. There is an optional parameter that is a function used to do the evaluation.

pluck()

And finally, my favorite. The pluck() method iterates through every member of the array and returns an array of the value of the attribute name passed in.

For a full listing and description of all the methods, see the Prototype documentation on arrays and enumerables.

Arrays: http://prototypejs.org/api/array

Enumerables: http://prototypejs.org/api/enumerable

The toJSON method has not yet been implemented because it depends on object methods that Prototype provides. Can you guess what my next project is?

Event delegation, as described in the first article of this series, is a way to take advantage of event bubbling to avoid binding an event listener more than once. jQuery 1.3 and the upcoming jQuery 1.4 have many features that make using event delegation in your web pages easier. The aim of this tutorial is to help you understand how these new features work.

From traditional event listening to event delegation

Since an event occurring on an element is propagated to all of its ancestors, an event listener can be bound to a single ancestor of numerous elements instead of being bound to all the elements individually.

Consider the following list items:

If we want to display the class of an item when it is clicked, a traditional event listener in jQuery would be written like this:

The event object passed to the handler has a target property which corresponds to the element that has been clicked.

The equivalent using event delegation would look like this:

Event delegation has two main advantages:

1. setting a single event listener instead of multiple ones is obviously faster;
2. any new element later added to the list will have the same behavior (as demonstrated in Working with Events, Part 1).

This translation to event delegation that we've just made is, however, slightly too simple, since our original aim was to display only the class of the list items. Using the previous snippet, the class of the unordered list itself can be displayed (by clicking to the left of a bullet-point). We thus have to make sure that the target of the click is a <li>.

Scanning the ancestors of the event.target: the .closest() method

With such a simple document, event delegation is really that easy to achieve. But things can get more complex if the items have children elements:

In this case, if the user clicks on one of the words item, the event.target will be a <u>. It is therefore necessary to loop through all of the ancestors of this original target to find the element that is "interesting" for us: the <li>

Notice that if the user clicks outside of an <li>, we have to stop looping through the ancestors at some point; in this case when we find the root of the document (which has no parentNode).

jQuery 1.3 introduced the .closest() method, which replaces this loop by a single line of code:

The parameter passed to the .closest() method is a CSS selector that will match the first interesting ancestor.

The context parameter

It can be noted that, when the click occurs outside of an <li>, we could stop looping through the ancestors before hitting the document root, but instead as soon as we hit the <ul>. jQuery 1.4 will introduce an optional context parameter to .closest() for this purpose:

Here this is the <ul> element to which the event listener has been bound. This optional parameter improves the performance of event delegation as it prevents the wasted resources of searching for an ancestor which cannot exist.

Event delegation in a single line: the .live() method

jQuery 1.3 also introduces .live(), a method which binds the event listener and implicitly calls the .closest() method to determine whether your event handler should be executed or not.

Note how different the syntax using the .live() method is. It seems that we have switched back to a traditional event binding. However, a big difference is that the event listener will work for any existing and future element matching our original selector. There is, of course, nothing magic: behind the scenes .live() simply binds the event listener to the document root and filters any event.target using the .closest() method.

A notable difference with the traditional event binding syntax is that we are not using the target property of the event object inside our event handler, but rather the currentTarget. Indeed, the target of the event is possibly a child of one <li>, whereas the currentTarget property refers to the element that has been found by the implicit .closest().

As explained on the Event Object documentation, the currentTarget property is supposed to be the current DOM element within the event bubbling phase, i.e. the element on which the event has been detected by the event listener, which will always be the element on which the event listener was bound. When using .live(), the currentTarget would therefore always be the document root and you would need to use .closest() once again on the original target to find an interesting ancestor.

This kind of code is required with jQuery 1.3, but as of jQuery 1.4, the currentTarget is modified internally and can thus be used to avoid the extra .closest() inside the event handler.

The context parameter

In jQuery 1.3 all live event listeners were effectively bound to the document root. This can hurt the performance of a web page since all events detected by an event listener will trigger the execution of an implicit .closest(), even though the event target might be totally out of interest.

In jQuery 1.4, .live() should be able to bind the event listener to a specific and more focused element of the document by taking advantage of the context of your jQuery object:

The context is the second parameter used to build our jQuery object. To be useful for .live() it has to be set as a pure DOM element, hence the [0] after $("ul"). Brandon Aaron has a useful article explaining the context parameter in detail.

Unbind for .live(): the .die() method

Just like .bind() has its .unbind() counterpart that allows for event listeners to be unbound, .live() has its .die() counterpart.

Unlike .bind(), .live() does not allow for namespaced events to be used.

Dealing with events that don't bubble

There are some events for which event delegation is traditionally not possible, simply because they do not bubble. The promise of jQuery 1.4 is nevertheless to make those events compatible with .live(). How this is achieved will be covered in the upcoming fourth part of this tutorial.

Scripts included in this post:

출처 : http://www.learningjquery.com/2009/09/working-with-events-part-3-more-event-delegation-with-jquery?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+LearningJquery+%28Learning+jQuery%29

Introduction

This article will cover the following elements:

• Form Skinning
• Form Validation
• Masking
• File Uploader
• Checkbox & Radio Button
• Spin Button & Slider
• Auto Complete
• Calendar & Time picker
• Drop Down Menu (Select Element)
• Color Picker
• Textarea

Form Skinning

Frustrated with the form elements inconsistency among different browsers? With these jQuery plugins, you can unified the look and feel of all your form elements.

• 
  jQuery jNice
  
• 
  Styling input file
  
• 
  jqTransform
  
• 
  Emblematiq Niceforms
  

Form Validation

It's always good to have client side form validation. These jQuery plugin will save your times and works by reusing already made form validation.

• 
  Form validator
  
• 
  Bassistance jQuery Validation
  
• 
  Live validation
  
• 
  Lightform
  

Masking

Masking can help to avoid human mistake. I found these plugins are very helpful to guide users and decrease the chances of bad data.

• 
  Masked Input Plugin
  
• 
  Meio Mask
  

File Uploader

These file uploader transform the orginal input file element into a more robust file uploader that able to upload multiple files and having a progress bar to indicate the upload progress.

• 
  Multiple File Upload
  
• 
  jqUploader
  
• 
  Uploadify
  

Checkbox & Radio Button

Spice it up your checkbox and radio button with these jQuery plugins!

• 
  Checkbox & Radio Input Replacement
  
• 
  Fancy Form
  
• 
  jQuery Checkbox
  

Spin Button & Slider

Spin button can be useful sometimes. The other alternative will be a slider.

• 
  Spin Button
  
• 
  jQuery UI - Slider
  

Auto Complete

You must have seen the auto complete functionality from Apple.com, google.com and all the major websites. With the following plugins, we, too can implement it in our websites easily.

• 
  Bassistance jQuery Auto Complete
  
• 
  AjaxDaddy jQuery Auto Complete
  

Calendar & Time picker

The old school method to let user select date and time are using drop down lists (day, month and year). Now, we can use a calendar, timepicker to replace the old way. Since it's picked from calendar, it decreases the chances of invalid date. I like them.

• 
  jQuery UI
  
• 
  Time Picker
  

Drop Down Menu (Select Element)

Want to do more with drop down menu? These plugins able to add more capabilities to drop down menu.

• 
  jQuery Image Drop Down
  
• 
  MC Dropdown
  
• 
  Drop down check list
  

Color Picker

If you are building some online tools that involves colours, I guess you will like the following plugins. jQuery based colour pickers!

• 
  jQuery Color Picker
  
• 
  Farbtastic Color Picker
  
• 
  Color Picker
  

Textarea

Sometimes, we get really annoyed when we have to type in message in such a small space (a textarea), and we have to scroll up and down, left and right (sometimes) to read the entire message. Say no more to scrolling! Add this autogrow/resizer capability to textarea to avoid that.

• 
  Autogrow Textarea
  
• 
  Textarea Resizer
  
• 
  jQuery Elastic
  

Conclusion

All the plugins are implemented using jQuery, there are still heaps of them out there. Of course, you might able to find other good stuff which are not made from jQuery. If you wrote jQuery plugin that enhances form, and you think it's really cool. Drop me a comment, I will add it in.

The following code controls the HTML form beneath it. It uses ajaxSubmit to submit the form.

// prepare the form when the DOM is ready 

$(document).ready(function() { 

    var options = { 

        target:        '#output2',   // target element(s) to be updated with server response 

        beforeSubmit:  showRequest,  // pre-submit callback 

        success:       showResponse  // post-submit callback 

 

        // other available options: 

        //url:       url         // override for form's 'action' attribute 

        //type:      type        // 'get' or 'post', override for form's 'method' attribute 

        //dataType:  null        // 'xml', 'script', or 'json' (expected server response type) 

        //clearForm: true        // clear all form fields after successful submit 

        //resetForm: true        // reset the form after successful submit 

 

        // $.ajax options can be used here too, for example: 

        //timeout:   3000 

    }; 

 

    // bind to the form's submit event 

    $('#myForm2').submit(function() { 

        // inside event callbacks 'this' is the DOM element so we first 

        // wrap it in a jQuery object and then invoke ajaxSubmit 

        $(this).ajaxSubmit(options); 

 

        // !!! Important !!! 

        // always return false to prevent standard browser submit and page navigation 

        return false; 

    }); 

}); 

 

// pre-submit callback 

function showRequest(formData, jqForm, options) { 

    // formData is an array; here we use $.param to convert it to a string to display it 

    // but the form plugin does this for you automatically when it submits the data 

    var queryString = $.param(formData); 

 

    // jqForm is a jQuery object encapsulating the form element.  To access the 

    // DOM element for the form do this: 

    // var formElement = jqForm[0]; 

 

    alert('About to submit: \n\n' + queryString); 

 

    // here we could return false to prevent the form from being submitted; 

    // returning anything other than false will allow the form submit to continue 

    return true; 

} 

 

// post-submit callback 

function showResponse(responseText, statusText, xhr, $form)  { 

    // for normal html responses, the first argument to the success callback 

    // is the XMLHttpRequest object's responseText property 

 

    // if the ajaxSubmit method was passed an Options Object with the dataType 

    // property set to 'xml' then the first argument to the success callback 

    // is the XMLHttpRequest object's responseXML property 

 

    // if the ajaxSubmit method was passed an Options Object with the dataType 

    // property set to 'json' then the first argument to the success callback 

    // is the json data object returned by the server 

 

    alert('status: ' + statusText + '\n\nresponseText: \n' + responseText + 

        '\n\nThe output div should have already been updated with the responseText.'); 

}