PHP MySQL - Stilson.net

www.it-ebooks.infoCHAPTER 22 • CREATING AJAX-ENHANCED FEATURES WITH JQUERY AND PHPResponding to EventsAlthough useful, JavaScript’s native event handlers are difficult to maintain because they must be tightlycoupled with the associated HTML element. For instance, it’s common practice to associate an onClickevent handler with a particular link using code that looks like this:CheckUsername AvailabilityThis is a pretty ugly approach, because it too closely ties the website’s design and logic together (seeChapter 24 for an explanation of the dangers in doing so). jQuery remedies this by allowing you toseparate the associated listeners from the elements. In fact, not only can you programmatically associateevents with a specific element, but you can also associate them with all elements of a certain type,elements assigned a specific CSS class name, and even elements meeting a certain nesting condition,such as all images nested within paragraphs associated with the class name of tip. Let’s start with one ofthe simplest possible examples, refactoring the above example to associate a jQuery click handler withthe page element assigned the ID check_un:$(document).ready(function() {$("#check_un").click(function(event) {alert("Checking username for availability");event.preventDefault();});}The $() syntax is just a jQuery shortcut for retrieving page elements according to tag name, classattribution, and ID. In this example, you’re looking for an element identified by the ID check_un, and sohave passed #check_un into the shortcut. Next, you attach jQuery’s click method to the element, causingjQuery to begin monitoring for an event of type click to be associated with that element. Within theensuing anonymous function you can define what tasks you’d like to occur in conjunction with thisevent, which in this example include displaying an alert box and using another handy jQuery featurethat prevents the element’s default behavior from occurring (which in the case of a hyperlink would bean attempt to access the page associated with the href attribute).With this code in place, you can update the hyperlink to look like this:Check UsernameClicking on this hyperlink will cause the alert box defined in the click handler to appear, eventhough there is no JavaScript explicitly tied to the hyperlink!Let’s consider another example. Suppose you wanted to associate a mouseover event with all imagesfound in the page, meaning it would execute each time your mouse pointer entered the boundaries of animage. To create the event, just pass the name of the HTML element (img) into the $() shortcut:$("#check_un").mouseover(function(event){alert("Interested in this image, are ya?");});As mentioned, it’s also possible to associate an event with only those elements meeting a certaincomplex condition, such as images defined by the class attribute thumbnail that are nested within a DIVidentified by the ID sidebar:441