Tương tác giữa PHP và jQuery - part 8 pot

CHAPTER 2 ■ COMMON JQUERY ACTIONS AND METHODS

71
},
{
"duration":6000,
"step":function(){
if(count++==200)
{
$(this).stop(true, true);
}
}
});
Handling Events
In many scripts, it’s desirable to have certain actions occur when certain events, or browser actions,
occur. Support is built into jQuery to handle browser events, which you’ll learn in this section.
Browser Events
Browser events occur when the browser itself experiences a change or error.
.error()
If a browser error occurs, this event is triggered. One common instance of a browser error would be an
image tag that tries to load an image that does not exist. The .error() method allows developers to bind
a handler (i.e., a function to be fired if the event occurs) to the event.
Create an image tag that tries to display an image that doesn’t exist, and attach an error handler to
the error event that outputs a message to the console:
$("<img />", {
"src":"not/an/image.png",
"alt":"This image does not exist"
})
.error(function(){
console.log("The image cannot be loaded!");
})

.appendTo("body");
Upon execution of this code, the console will display the following:
CHAPTER 2 ■ COMMON JQUERY ACTIONS AND METHODS

72
>>> $("<img />", { "src":"not/an/image.png", ot be loaded!"); }) .appendTo("body");
[ img image.png ]
The image cannot be loaded!
.scroll()
If the document is scrolled, the scroll event is fired. To bind a handler to this event, use the .scroll()
method:
$(window)
.scroll(function(){
console.log("The window was scrolled!");
});
After executing this code, scrolling the browser window will cause a message to be logged in the
console.
Additionally, calling the .scroll() method without any parameters will trigger the scroll event to
fire. After binding the preceding handler to the window, trigger the event by running the following:
$(window).scroll();
Executing this code will log the scroll event handler’s message in the console.
Handling Document Loading Events
Often, JavaScript needs to wait until the document is ready before executing any scripts. Also, when
users exit a page, sometimes it’s desirable to fire a function to ensure they meant to navigate away from
it.
.ready()
The .ready() method is used in nearly every jQuery script as a safeguard against the script executing too
early and, therefore, not performing properly. This method waits for the DOM to be ready for
manipulation before firing its handler.
Common practice is to make the entire script a callback function to be fired by the .ready()

handler:
$(document).ready(function(){
// All jQuery functionality here
});
Additionally, the .ready() method accepts a parameter to use as an alias for the jQuery function.
This allows you to write failsafe jQuery scripts that will work as expected even if the $ alias is given back
CHAPTER 2 ■ COMMON JQUERY ACTIONS AND METHODS

73
to another library using jQuery.noConflict() (which allows for multiple JavaScript libraries that use the
$ alias to be used on the same project without issue).
You can guarantee the $ alias will work using the following:
jQuery.ready(function($){
// All jQuery functionality here
$("p").fadeOut();
});
Technically, any alias can be passed here:
jQuery(document).ready(function(xTest){
xTest("#bar").click(function(){console.log("Clicked!");});
});
This performs as expected, with no errors. There aren’t many cases in which this check would be
necessary, but it illustrates how the alias works with the .ready() method.
Finally, the jQuery function itself can be used as an alias for .ready():
jQuery(function($){
// actions to perform after the DOM is ready
});
.unload()
The unload event is triggered whenever a user exits a page by clicking a link, reloading the page, using
the forward or back buttons, or closing the window entirely. However, the handling of unload is not
consistent across all browsers. And therefore should be tested in multiple browsers before being used in

production scripts.To create a link to Google and attach an alert to the unload event, use the following
code:
$("<a>", {
"href":"",
"text":"Go to Google!"
})
.appendTo("#bar");
$(window).unload(function(){
alert("Bye! Google something neat!");
});
Execute this code, and click the new link. The alert fires, and you’re redirected to the Google home
page.
Handling Event Attachment
There are a whole slew of browser events triggered by the user, and jQuery provides several methods to
handle them easily.
CHAPTER 2 ■ COMMON JQUERY ACTIONS AND METHODS

74
The available events are blur, focus, focusin, focusout, load, resize, scroll, unload, click,
dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select,
submit, keydown, keypress, keyup, and error.
.bind() and .unbind()
To bind an event handler to an element, the .bind() method is used. It accepts an event as its first
argument and a handler function as the second argument.
Multiple events can be bound using a space separated list of events as the first argument as well. To
bind different handlers to different events, a JSON-formatted object can be passed to .bind() as well.
To bind a console message log to the click event, use the following:
$("p")
.bind("click", function(){
console.log("Click happened!");

});
Clicking a paragraph after running this code will result in a message being logged to the console.
To bind a handler to both the click and mouseover events, use the following:
$("p")
.bind("click mouseover", function(){
console.log("An event happened!");
});
Now, either clicking or hovering over a paragraph will log a message in the console.
If the handler needs to have data passed to it, an additional parameter is available. This is a JSON-
formatted object containing variables to be used in the function. These variables are bound to the event
object so that the values remain intact within the given handler.
Set a click handler for two paragraphs in the test document with identical functionality but
different log messages using the following:
// Create a value for the notice variable
var notice = "I live in a variable!";
$("p.foo").bind("click", { n:notice }, function(event){
console.log(event.data.n);
});

// Change the value of the notice variable
var notice = "I live in a variable too!";
$("#bar").bind("click", { n:notice }, function(event){
console.log(event.data.n);
});
To bind different handlers to the click and mouseover events, you would use this:
$("p")
.bind({
"click":function(){
console.log("Click happened!");
},

CHAPTER 2 ■ COMMON JQUERY ACTIONS AND METHODS

75
"mouseover":function(){
console.log("Mouseover happened!");
}
});
After execution, a different message will be logged to the console for each event when it occurs.
To remove an event, simply call the .unbind() method. If called with no parameters, all event
bindings are removed from an element. To specify, the name of the event to unbind can be passed as the
first argument. To further specify, the function to be removed from the event can be passed as a second
argument.
To unbind all events from the paragraphs in your example, use the following:
$("p").unbind();
To only remove the click event handler, use this code:
$("p").unbind("click");
Or, if a specific function was bound to an element, it could be unbound like so:
var func1 = function(){
console.log("An event was triggered!");
},
func2 = function(){
console.log("Another handler!");
};
$("#bar")
.bind("click", func1)
.bind("click", func2)
.trigger("click") // fire the event once
.unbind("click", func1);
The preceding code will create two functions (stored in the func1and func2 variables), bind them to
the click event for the paragraph with ID bar, trigger the event once (you’ll learn about .trigger() later

in this section), and unbind the function stored in func1.
After running this code, clicking the paragraph will fire only the function stored in func2.
.live() and .die()
Similar to .bind() and .unbind(), .live() and .die() will attach and remove event handlers from
elements, respectively. The main difference is that .live() will attach handlers and JavaScript
properties not only to existing events but to any new elements added to the DOM that match the selector
afterward as well.
For instance, add a click event handler for any anchor elements using the following:
$("a")
.live("click", function(){
console.log("Link clicked!");
return false; // prevent the link from firing
});
CHAPTER 2 ■ COMMON JQUERY ACTIONS AND METHODS

76
Of course, there are not any links on the example page at the moment. Without reloading, add an
anchor tag to the paragraph with ID bar using the following:
$("<a>", {
"href":"",
"text":"Go to Google!"
})
.appendTo("#bar");
The new link appears, and even though the event was bound before any anchor tags existed in the
DOM, clicking the link results in a message logged in the console and the link not firing.
Performing the previous action using .bind() does not work. Additionally, the click event handler
bound with .live() cannot be removed with .unbind(); to remove the event, you must use .die(). The
use of .die() is the same as that of .unbind().
.one()
The function and use of the .one() method is identical to that of .bind(), except that the event handler is

unbound after one occurrence of the event.
Add a new click event handler for the paragraph with ID bar that will only fire once using the
following:
$("#bar").one("click", function(){
console.log("This will only fire once.");
});
After execution, clicking the paragraph with ID bar results in one message logged to the console,
with subsequent clicks having no effect.
.toggle()
The .toggle() function allows developers to bind two or more functions to the click event to be fired on
alternating clicks. Alternatively, the function can be used to toggle visibility of elements (like toggling
.show() and .hide()—similar to how .slideToggle() alternatively performs the functionality of
.slideUp() and .slideDown() when called).
First, bind three different log messages to the click event for the paragraph with ID bar using the
following:
$("#bar")
.toggle(function(){
console.log("Function 1");
},
function(){
console.log("Function 2");
},
function(){
console.log("Function 3");
});
CHAPTER 2 ■ COMMON JQUERY ACTIONS AND METHODS

77
After execution, upon clicking the paragraph with ID bar, the three messages are logged in
succession on consequent clicks.

Next, toggle the visibility of the paragraph with ID bar with the following code:
$("#bar").toggle();
Firing this function hides the paragraph. Firing it again brings it back. By adding the duration as the
first argument, the method will animate the element as it’s hidden or shown:
$("#bar").toggle(2000);
Last, a Boolean flag can be passed to determine whether all elements should be shown or hidden:
$("#bar").toggle(true); // all elements will be shown
$("#bar").toggle(false); // all elements will be hidden
.trigger()
To trigger an event, the .trigger() method is used. This method accepts an event to trigger and an
optional array of arguments to be passed to the handler.
Bind a handler to the paragraph with ID bar, and trigger it using the following code:
$("#bar")
.bind("click", function(){
console.log("Clicked!");
})
.trigger("click");
To pass additional data, modify the code as follows:
// create a variable
var note = "I was triggered!";
$("#bar")
.bind("click", function(event, msg){ // allow a 2nd argument
// If no msg variable is passed, a default message
var log = msg || "I was clicked!";
console.log(log);
})
.trigger("click", [ note ]); // array passed in square brackets
This outputs the message stored in the note variable to the console.
Shortcut Event Methods
Every event has a shortcut method that accepts the handler function as an argument. If passed without

an argument, it calls .trigger() for its event type.
The available shortcut functions are .blur(), .focus(), .focusin(), .focusout(), .load(), .resize(),
.scroll(), .unload(), .click(), .dblclick(), .mousedown(), .mouseup(), .mousemove(), .mouseover(),
.mouseout(), .mouseenter(), .mouseleave(), .change(), .select(), .submit(), .keydown(), .keypress(),
.keyup(), and .error().
CHAPTER 2 ■ COMMON JQUERY ACTIONS AND METHODS

78
As an example, the following will bind a handler to the click event, and fire the event.
$("#bar").click(function(){ console.log("Clicked!"); }).click();
Using AJAX Controls
The last set of jQuery methods we’re going to cover are probably the most useful, and more than likely
played a large role in the widespread adoption of jQuery. The methods providing AJAX
4
functionality are
incredibly useful and, especially for anyone who has built AJAX scripts in plain JavaScript before, as easy
as pie.
■ Note For further reading on AJAX, see the Wikipedia article here:
%29
For this section, you'll need an external file to access using the AJAX controls. Create a new file in the
testing folder called ajax.php. Inside, insert the following code:



<?php

echo '<p class="ajax">This paragraph was loaded with AJAX.</p>',
'<pre>GET variables: ', print_r($_GET, TRUE), '</pre>',
'<pre>POST variables: ', print_r($_POST, TRUE), '</pre>';

?>
This file will be called by the various AJAX methods available in jQuery. It will show you the data
passed to the script for illustrative purposes.
$.ajax()
The low-level, or most basic, function for sending AJAX requests is $.ajax(). Notice that this function is
called without a selector, because it doesn’t apply to the jQuery object. AJAX actions are global functions,
carried out independently of the DOM.
The $.ajax() function accepts one argument: an object containing settings for the AJAX call. If
called without any settings, the method will load the current page and do nothing with the result.


4

CHAPTER 2 ■ COMMON JQUERY ACTIONS AND METHODS

79
Quite a few settings are available for $.ajax(), not all of which are covered here or used in this book.
See for a full list of available settings. The most common follow:
• data: This describes any data to be sent to the remote script, either as a query
string (key1=val1&key2=val2) or as JSON ({"key1":"val1","key2":"val2"}).
• dataFilter(data, type): This callback allows prefiltering of data and is great for
sanitizing data as it comes from the remote script.
• dataType: This described the type of data expected from the request. jQuery makes
an intelligent guess if this is left undefined. The available types are "xml", "html",
"script", "json", "jsonp", and "text".
• error(XMLHttpRequest, textStatus, errorThrown): This callback is to be executed
in the event of a request error. The XMLHttpRequest object, a string communicating
the status of the request, and an error code are passed as arguments.
• success(data, textStatus, XMLHttpRequest): This callback is to be executed if the
request completes successfully. The data returned from the remote script, a string

communicating the status of the request, and the XMLHttpRequest object are
passed as arguments.
• type: This is the type of request to send. The default is GET, but POST is also
available. PUT and DELETE can be used but may not work properly in all browsers.
• url: This is the URL to which the request is to be sent.
To send a basic POST request to your sample script and load the results into the paragraph with ID
bar, you would use the following:
$.ajax({
"type":"POST",
"url":"ajax.php",
"data":"var1=val1&var2=val2",
"success":function(data){
$("#bar")
.css("background","yellow")
.html(data);
}
});
After executing this code, the contents of the paragraph are replaced with the loaded information
(see Figure 2-22).
CHAPTER 2 ■ COMMON JQUERY ACTIONS AND METHODS

80

Figure 2-22. The loaded AJAX information from ajax.php
$.ajaxSetup()
To set default options for AJAX calls, the $.ajaxSetup() function is used. For instance, to specify that, by
default, all AJAX requests should be sent to ajax.php using POST and then loaded into the paragraph with
ID bar, the following would be used:
$.ajaxSetup({
"type":"POST",

"url":"ajax.php",
"success":function(data){
$("#bar")
.css("background","yellow")
.html(data);
}
});
Now, new AJAX requests can be made easily by simply passing new data:
$.ajax({
"data":{
"newvar1":"value1",
"newvar2":"value2"
}
});