dept_form.html

This page returns all of the employees in a selected department.

add_employee.html

This page uses Ajax to add an employee to the database (note: the version running on this site does not actually execute the INSERT query that updates the database.)

search_form.html

This page provides a simple search to retrieve employees by last name.

There’s no navigation within or among the pages. You’ll need to click Back to return to this page to see another example. To run one of the examples without Ajax (to see what that’d be like for visitors that can’t use the Ajax version), disable JavaScript in your Web browser.

1. Incorporating jQuery into an HTML page
2. Selecting page elements
3. Adding event handlers
4. Applying effects
5. Manipulating elements
6. Ajax
7. Plug-ins

I think I noted this in an earlier post, but an interesting feature of jQuery is that it ignores attempted actions that cannot be done. For example, if you attempt to hide an already hidden element, nothing happens. Specifically no error is thrown. While full-fledged programming in any language mandates that you avoid and watch for errors, jQuery is intended for quick and easy use, so this design means you don’t, in this example, need to test an element’s visibility before you attempt to hide it, greatly minimizing the amount of code you need to write.

Similarly, if you attempt to select something and no elements match the criteria, no objects are returned. Attempting to apply methods to a non-selection still doesn’t throw an error:

$('#thisDoesNotExist').addClass('varmit');

If you want to confirm that a selection was made, you can apply the length() method to test for that:

var set = $('p');
if (set.length()) {...

That code also shows how you can assign the results of the jQuery function call to another variable, making that result set available elsewhere in your code.

Going along the testing lines, for when you need to, you can see if an element has a particular class by using the is() method:

if ($('#x').is('.className') {...

This method tests an expression and returns a Boolean value. Note the period before the CSS classname in this particular use of it.

To see if something is hidden, use the custom :hidden criteria:

if ($('#x').is(':hidden')) {...

The :visible keyword is its corollary.

A variation on this is if you only want to select hidden or visible elements in the first place: $(‘p:visible’) selects every visible paragraph.

Moving on randomly…a common need for a form is to disable the submit button after the user has clicked it, thereby preventing multiple submissions. To do so using jQuery, use $(‘#submitButtonId’).attr(‘disabled’, ‘disabled’). That code selects the element with an ID value of submitButtonId, then applies the disabled attribute to it (in full XHTML compliance, the corresponding code would be disabled=”disabled”). You would obviously need to execute this code in a function that’s called upon the form’s submission (through an event handler).

Still quite randomly…in the first post I discussed how this code—

$(function() {
    // Do whatever.
});

—is used to identify code to be executed once the document is ready (somewhat similar to the onload event). Interestingly, jQuery allows you to define many of these document ready functions. This means you could put separate pieces of code into separate document ready functions or, more commonly, multiple included JavaScript files could each make use of this approach without overlapping or conflicting with each other.

Moving on more randomly and in conclusion…Firefox users, which I hope is everyone that develops Web pages, may also appreciate the jQuery Plugin for Firefox. It creates a menu that lets you more quickly access jQuery documentation. Speaking of which, when you’re looking at the jQuery manual, you may click on a link under API Reference to find methods within a specific subcategory, like Effects. The resulting page will list the methods in that category, with a brief description of each and its signature (i.e., what arguments it takes and what it returns). If you click on a method’s name on this page, you’ll be taken to another page that has a demo, with visible source code, for how that method can be used.

So that’s it! For now anyway. I’ll probably have more to say about jQuery in time. I do hope that you’ve found these posts to be useful. Of course, your best reference is the excellent yet managable jQuery documentation. There are also plenty of articles in the documentation and linked from it. As always, thanks for reading and let me know if you have any comments or questions.

1. Incorporating jQuery into an HTML page
2. Selecting page elements
3. Adding event handlers
4. Applying effects
5. Manipulating elements
6. Ajax

jQuery itself is a relatively light framework that provides basic, cross-platform functionality. It was intended to be easy to expand and build upon. This way, if you need X feature, it can be added, but if you don’t need that feature, you’re not forcing the user to download all the JavaScript for it. This is a great design, the only problem being how to find and use the plug-in you need.

To start, a lot of common functionality has been put into a separate library, called jQuery UI, short for User Interface. This library adds features like drag and drop, resizing, accordians, tabs, date pickers, progress bars, plus effects. Even though jQuery UI contains all that stuff, you can use the library’s download page to build your own custom version that only defines the features you need. See the jQuery UI demos page for examples and source code. The Getting Started page also includes some good, basic information. In time, you’ll likely want to check out the jQuery UI ThemeRoller, which helps create a custom, cohesive look for the effects to match the rest of your site.

If jQuery UI is missing a feature that you need, head to jQuery’s plug-ins page. There the plug-ins are organized by type, and there are listings of most popular and most recent releases. If you want someone else’s opinion as to which plug-ins are best, a quick search turns up many articles on the subject:

• http://www.noupe.com/ajax/37-more-shocking-jquery-plugins.html
• http://speckyboy.com/2008/07/21/20-amazing-jquery-plugins-and-65-excellent-jquery-resources/
• http://www.noupe.com/ajax/45-fresh-out-of-the-oven-jquery-plugins.html
• http://www.wiliam.com.au/wiliam-blog/the-best-web-2-jquery-javascript-plugins
• http://www.ajaxline.com/10-best-jquery-plugins-march-2009

There are a couple of plug-ins that I personally recommend: Superfish and the jQuery Form Plugin. The former creates “suckerfish”-style navigation menus out of nested unordered links. These are animated, keyboard accessible menus that degrade well. See the examples page to look at this in action. The jQuery Form Plugin makes it easy to integrate Ajax functionality with forms (as form data is commonly used in Ajax interactions). If you look at the examples, you’ll see that it could hardly be easier to make an Ajax request using form data. Plus it has a cool feature where it automatically uses a hidden iframe to handle file uploads (which cannot be handled via Ajax).

So, what else? Date pickers are a popular tool and the jQuery UI includes a version. If you want something fancier, consider the Date Range Picker plug-in. There are also nice color pickers available, like this one. And there are a ton of different image manipulation plug-ins out there, as you can see in the links above and on jQuery’s plug-in page.

1. Incorporating jQuery into an HTML page
2. Selecting page elements
3. Adding event handlers
4. Applying effects
5. Manipulating elements

Ajax, which may or may not stand for Asynchronous JavaScript and XML, depending upon whom you ask, is largely responsible for JavaScript’s current status. What was once a “toy” language used for rollover images at best, and annoying distractions at worst, is now a viable tool for developing Rich Internet Applications. The ability to make server-side requests behind-the-scenes so that user never has to leave the current page has transformed Web applications into more responsive, dynamic experiences, much more similar to what the user’s come to expect from their desktop applications (the expansion and adoption of broadband access is also a factor, among others). But this post isn’t intended to convince you to use Ajax, rather to show you how easily you can use it with jQuery. Because everything’s easier with jQuery!

There are a couple of different ways you can make Ajax requests using jQuery. To start, there’s the load() method. This method makes a request of a specific server-side resource and uses the returned result as the content for the element to which it’s applied. For example, say you have a DIV with an ID of news. You could load the current news, returned by a server-side script, into that DIV by doing this: $(‘#news’).load(‘fetch_news.php’). In this example, the PHP script presumably just returns a bunch of text, which is then used as the innerHTML value for the selected element. You can pass GET values to the server-side script by appending them to the URL, or pass POST values by providing a second argument containing the data to be posted. If you check out the jQuery documentation for load(), you’ll see an example where part of the returned text is parsed out and used.

If you want to do something more dynamic with the returned response, you can use the aptly named get() and post() methods.Unlike a lot of the methods I’ve discussed in my posts thus far, these methods aren’t applied to specific elements. Instead, the syntax you’ll see are $.get() and $.post(). Any method that gets called like $.methodName() are utility methods, as they apply to the document as a whole, and not to any subset of the DOM.

The get() method takes up to four arguments: a URL, optional parameters (data to be sent to the server), a function to be called when the request is completed, and the type of response to expect. For this fourth argument, use a string: text, html, xml, json, script, or jsonp. As an example, say you want to call the server-side script to see if a username is available:

$.get('check_username.php', { username: 'test' },
    function(data) {
        alert (data);
    },
'text');

So that makes a request to check_username.php, found in the same directory on the server as this current page. The request sends along a value of test assigned to username (so the PHP script would refer to $_GET['username']). The anonymous function will be called when the request is completed. It receives one argument, the returned response, assigned to data, which is then alerted. Finally, we state that text is expected back. That { username: ‘test’ } structure may seem a little strange. This is just one way of creating an object in JavaScript. In this case, it’s an anonymous object with one property (username). To pass multiple values, you would separate each by a comma: { username: ‘test’, color: ‘blue’, timezone: ‘EST’ }. Do note that the properties themselves are not quoted but their values are. Also, the anonymous function can be written to take two arguments, the second being a text version of the returned status, like success or notmodified.

In context, where you might check a provided username after the corresponding form field has changed, you would do this:

 // Call this anonymous function when the input's value changes:
$('#usernameInput').change(function() {

    // Create a new, empty object.
    var data = new Object();

    // Add a property called 'username' with a value of the form input's value:
    data.username = $('#usernameInput').val();

    $.get('check_username.php', data, function(response) { alert (response); }, 'text');

});

(In a more complete example, though, you would confirm that the input has some value before making the request, and then probably do some error reporting based upon the result. Like if the result was a simple binary value for available/unavailable, you could add a message to the DOM or change the class of the form input’s label to indicate the unavailability of the username.)

The post() method is used exactly like get(), but makes a POST request. Generally speaking, you should make GET requests when you’re just fetching data from a page; you use POST when the intention is to alter content on the server. For comparison, normal viewing of a page in the browser, or clicking on a link, is a GET request; submitting a form is often a POST request, where the result of that request is something dynamic happening, like updating a record in a database or sending an email.

The primary Ajax-related jQuery method is…ajax()! Like get() and post(), ajax() is not invoked on a selected element. This method only takes one argument, which is an object of options. You can find the full list of options in jQuery’s manual, but the key ones are: data, dataType, success, type, and url. The data is the data to be sent, as an object (like in the above get() example). The dataType option is the same as the fourth argument to get() and post(), with a value like text, html, json, jsonp, script, or xml. The value assigned to success is the function to be called when the request succeeds. The type is either get or post. The url value is the server-side script to which the request should be made.

Fleshing out the earlier get() example using ajax(), you’d have something like this:

// Call this anonymous function when the input's value changes:
$('#usernameInput').change(function() {

    // Create the data to be sent along as an object:
    var data = new Object();
    data.username = $('#usernameInput').val();

    // Create the Ajax options as an object:
    var options = new Object();
    options.data = data;
    options.dataType = 'text';
    options.type = 'get';
    options.success = function(response) {
        if (response == 1) { // Good!
            // Add a message:
            $('#usernameInputMsg').text('The username is available.');

            // Remove the error class, if present:
            $('#usernameInputLabel, #usernameInputMsg').removeClass('error');

        } else if (response == 0) { // Bad!
            // Add a message:
            $('#usernameInputMsg').text('The username is unavailable!');

            // Add the error class to two elements:
            $('#usernameInputLabel, #usernameInputMsg').addClass('error'); //
        }
    };
    options.url = 'check_username.php';

    $.ajax(options); // Make the request!

});

You can see this in action here. Note that for creating the both objects used in the request, I’m doing a longer, more formal object creation, to make it more clear what’s going on. There are more terse ways of accomplishing the same thing.

And that’s it for Ajax in jQuery. As always, there’s more information in the jQuery manual and in various tutorials online. And in my next post, I’ll discuss plug-ins, among them is the Form plug-in, which provides an easy way to submit form data via Ajax.

You can alter the size of an element using height() and width(). If called with an argument, that value will be the element’s new height or width accordingly. If either method is called without an argument, the element’s height or width is returned.

For more on the above methods, see jQuery’s documentation for CSS.

A few very important methods I have yet to discuss come under jQuery’s attributes category.These are html(), text(), and val(). Each of these can retrieve or set an element’s HTML, text, or value. For example, html() will return the innerHTML value of an element, or if provided with an argument, will update that element’s innerHTML. The text() method is used the same way for an element’s text value. In other words, html() can get and set HTML; text() can only get and set text. The val() method gets or sets the value of an element, like form elements.

Say you have two form inputs—firstName and lastName. You can combine what the user enters there and place it in another element, like an paragraph greeting:

var name = $('#firstName').val() + ' ' + $('#lastName').val();
$('#greeting').html('Hello, <span class="bold">' + name + '</span>');

Then there’s the attr() method, short for attribute, can be used to retrieve or apply an attribute to an element. To get a specific link’s URL, you would use $(‘#somelink’).attr(‘href’). To change every image so that it doesn’t have a border, that’d be $(‘img’).attr(‘border’, ’0′). Or, as a very useful example, to disable a submit button after a form submission (to prevent duplicate submissions), use: $(‘#submit’).attr(‘disabled’, ‘disabled’).

The last topic to discuss in this post is DOM manipulation through adding, moving, or removing elements. The append() method adds content to the end of an element; prepend() adds content to the beginning of it. Note that both methods add the content “inside” of the element. So this example add two strings within the paragraph tags: $(‘#someP’).append(‘This is at the end.’).prepend(‘This is at the beginning.’). Both methods have a corresponding *To() method—appendTo() and prependTo()—for situations where you want to create new content, then choose the existing element to which the new content should be added.

The corollaries to append() and prepend() are after() and before(). These methods add the new content outside of the selected element. The insertAfter() and insertBefore() work like appendTo() and prependTo(), but again are applied outside of the existing element.

Next up are a series of methods for wrapping elements. For example, if you want to wrap all paragraphs in a DIV: $(‘p’).wrap(‘<div class=”content”></div>’). There are variations on this method; see the jQuery documentation for more.

Finally, there’s the replaceWith() method, for replacing an element with something else, like replacing all unordered lists with ordered lists. The empty() method gets rid of an elements children (aka subelements) and remove() gets rid of the element itself, plus its children.

So that’s an overview of how you can manipulate DOM elements. I didn’t rough out an example for these but I can if you think further clarification is necessary. In my next post, I’ll talk about making Ajax requests using jQuery.

In my second post on jQuery, I already mentioned a couple of functions you can use for various effects: addClass(), hide(), and show(). Of these, addClass() and its sibling removeClass() is the most powerful and flexible. By applying defined CSS classes to elements (or by removing their application), you can dramatically change the appearance of an element. And as CSS allows elements to have multiple classes, so you can add as many as you’d like.

Moving on, the hide() and show() methods do exactly what you’d expect. Each takes an optional speed argument: slow, normal, or fast. Or you could specify how quickly the effect is accomplished by providing a number of milliseconds. The default affect, without a speed argument, is for the transition to occur immediately.

These two methods can be combined under one umbrella using toggle(). Say you have a title and some content:

<h2 id="moreTitle">Click for More Information</h2>
<p id="moreInfo">Lorem ipsum dolor sit amet....</p>

You can add a toggle() method to the paragraph that’s revealed and hidden when the H2 is clicked:

$('#moreTitle').click(function() {
    $('#moreInfo').toggle();
});

If the P is hidden, then clicking the title will show it. If it’s currently shown, clicking the title will hide it. You can see this in action in the second section in the example. And, as you can see in the example, the rest of the page content gets moved around seamlessly as needed. (Note that in a real application, you’d want to make it all look nicer, perhaps having a +/- graphic that changes to indicate the state.)

As an aside, going back to the addClass() and removeClass() methods, there’s also toggleClass(), which adds or removes a class as appropriate.

Similar to show() and hide() are slideUp(), slideDown(), and slideToggle(). The effect is the same as using show() and hide() with a set speed. See the third example on the demo page.

Next there’s fadeIn() and fadeOut(). Each makes objects appear or disappear, but only through the effect of fading (see the fourth section in the demo). Both take an optional speed argument, which is again slow, normal, fast, or a number of milliseconds. The fadeTo() method changes the opacity of an object. Provide it with a speed as the first argument and the desired opacity as the second. This should be a number from 0.0 (hidden) to 1.0 (full visibility).

Again, see the demo example that goes with this post to view these in action, and look at the source code to see the minimal amount of JavaScript needed to make all this happen. The stress in the demo is on the functionality; real-world implementation would naturally be improved.

A few last things, to wrap this up…

• An entirely different way you can affect an HTML page is to change the elements that exist (i.e., add and remove objects) or change their contents. Both will be discussed in the next post on jQuery.
• You can write custom effects and apply them to elements using the animate() method.
• The stop() method terminates an in-process effect.
• Because of the way jQuery methods work (they often return the thing they were applied to), you can chain multiple methods in one line, thereby creating multiple effects in one step. This next line makes it so that any time a link is clicked, it’s class is changed and it’s partially faded:

$('a').click(function() { $(this).addClass('someNewClass').fadeTo(0.4); });

• Finally, for all of these effects, remember that jQuery lets you select any number of objects on the page at one time, so you can apply one or more effects to one or more elements at the same time (as again the above line of code demonstrates).

UPDATE: I keep forgetting to mention an important jQuery concept here: jQuery will not complain if you attempt to apply an inappropriate method. For example, if you apply hide() to a hidden element, nothing happens, including no errors or exceptions. Or if you call removeClass() on an element that doesn’t have the named class, again, it’s not a problem. This is important to know because it means you don’t need to add a ton of code checking for an element’s properties prior to attempting something (as you should in JavaScript proper or in other programming languages).

So that’s it for built-in jQuery effects. I hope this helped and let me know if you have any comments or questions.

<input type="text" id="something" onchange="callThisFunction()" />

In jQuery, the preference is to put the JavaScript within SCRIPT tags in the HEAD of the page, not lost in the rest of the HTML body (this is part of the Unobtrusive JavaScript philosophy). So you would first select a particular element using $(‘#something’) or whatever, then call the method associated with the desired event. The onchange in the above code becomes change(), onfocus becomes focus(), onmouseover is mouseover(), onclick becomes click(), etc. Normally each of these is passed an anonymous function to be executed when the event occurs:

$('#something').change(function() {
    // Do whatever.
});

Within the anonymous function, this refers to the element that’s the recipient of the event. So to alert what the user just entered into the text box, you would code:

$('#something').change(function() {
    alert($(this).val());
});

Also, to be clear, the val() method returns the value of an element. With a text input, the value is the text entered into it.

Note that because you can’t reference Document Object Model elements until after the DOM has loaded, you’d put this code into a function that’s called after that point:

$(function() {
    $('#something').change(function() {
        alert($(this).val());
    });
});

As I discussed in my first post on jQuery, the above syntax is shorthand for

$(document).ready(function() {
    // Do whatever.
});

What this means is that ready() is a method associated with an event, specifically the browser window’s event of the DOM having been loaded.

There are other ways in jQuery to associate events with elements. Two nice methods—hover() and toggle()—take multiple functions as arguments. The hover() method takes a mouseover function as its first argument, the mouseout function as its second. So using it you can easily invoke whatever code with this common event pair. The toggle() method takes two or more functions as arguments. Each subsequent function will be executed upon repeating clicks upon that element. Also, I should point out that the bind() method is an alternative way of associating events with elements. This method takes the event type as its first argument, the function to be called as its second. The above example could be rewritten as:

$('#something').bind('change', (function() {
    alert($(this).val());
});

The jQuery documentation discusses all of the event-related methods, of course. There are several related to key events, and other important ones like: submit(), for when a form is submitted; select(), for when an element is selected; and, resize(), for when the browser window is resized. They’re all well documented, with examples. And, of course, these are all browser-independent ways of handling events in jQuery.

In the next post, I plan on discussing some of jQuery’s effects, like hiding and showing elements.

$(document).ready(function() {
    // Do whatever.
});

The $(document) part refers to the HTML document (note that there are no quotes in this document reference), so that code selects the document, on which the ready() method is called.

Selectors in jQuery work like selectors in CSS. You can identify a specific element using its ID value, as in the above example. You can also identify every element with a given class: $(‘.someClass’) refers to any element type that has a class value of someClass. Or you can identify every element of a given type: $(‘div’) refers to all DIV elements and $(‘ul li’) refers to all list elements found within unordered lists (so it wouldn’t select list elements in ordered lists). You can even combine these: to reference all the table rows with a class of heading, use $(‘tr.heading’).

Selectors are very important and powerful. I found the syntax to be cryptic and confusing at first, but once I realized how simple it was, jQuery really opened up for me. The examples I provided are relatively obvious, but jQuery has its own unique selectors. For example, you could refer to every other row in an HTML table using tr:nth-child(even) (you might do this to alternate the row background colors). Or you can find elements based upon their parent elements, like every image that’s a child object of DIV: div > img (that would not find images placed outside of DIVs or nested within subelements of a DIV).

Once you’ve selected an element or list of elements using $(), you can apply methods to them to change their behavior. Object-oriented programming languages (like JavaScript) use a objectName.methodName syntax to call a function on an object (the function must “belong” to that object type, though). In jQuery, it’s the same thing. For example, to apply a new CSS class to all paragraphs, you would write $(‘p’).addClass(‘someClass’). Or say you want to make a specific object disappear: $(‘#someID’).hide(). If you need to change an element’s HTML, like the text found between paragraph tags, call the html() method, passing it the new value: $(‘#update’).html(‘New text.’).

Again, as with some object-oriented languages, you can chain multiple methods, so that the result from one method is then applied to another: objectName.methodName1.methodName2.methodName3. (How well and to what level this is supported differs from one OOP language to the next, but this is the kind of thing that Ruby does very well and is also supported in jQuery.) So, as an example, say you create a page of questions with the answers hidden in SPAN tags around the document. They all have the class answer and are all initially hidden. The user looks at each question, thinks about their answers, then clicks a button or whatever that reveals the right answers. To do this, you might want to both display all of these SPANs and add an extra class to highlight them (elements in HTML can have multiple classes). In JavaScript, this would require a lot of code but in jQuery, it’d just be $(‘span.answer’).addClass(‘highlight’).show().

Once you’ve grasped the jQuery syntax and know how to select the element(s) to which something should apply, then it’s just a matter of invoking the proper methods on the selected element(s). You can find the full documentation for all of the available effects/methods in the jQuery documentation, of course. That Web site also has quite a few well-written and useful tutorials that you ought to consider.

In my next post, I’ll discuss event handling, which is what you also need to know to apply this knowledge (because you almost always want to change something on the page only after something specific has happened).