Online Book Reader

JQuery_ Novice to Ninja - Earle Castledine [78]

We’ve now added a few container fields to the HTML. When an update of the data is required, we use jQuery to update the text of the containers:

$(this).find('#num-items').text(cart.items.length);

$(this).find('#total-cost').text(cart.getTotalCost());

This is much nicer than our first attempt: it leaves all the markup in the HTML page where it belongs, and it’s easy to see what the code is doing.

There’s one other (very handy) option for managing markup that will be manipulated by jQuery. When you’re working with applications that return a list or grid of results—say, an item list for a shopping cart—you can include an element that acts as a template for each item, and simply copy that element and edit its contents whenever you need to add a new item.

Let’s put this into practice by doing a bit of work on the StarTrackr! shopping cart. We’d like to be able to add and remove items using jQuery. The items sit in an HTML table, and we’d prefer to avoid writing out whole table rows in our jQuery code. It’s also difficult to use placeholders, as we’re unaware of how many items there will be in the cart in advance, so it’s unfeasible, simply prepare empty table rows waiting for jQuery to populate them with content.

Our first task is to create an empty row with display:none; to act as our template:

chapter_06/01_client_side_templating/index.html (excerpt)

Name	Qty.	Total
Name	Quantity	Total.00

Next we’ll create a helper function that does the templating for us. This keeps the code centralized, making it easy to maintain when the template changes. The template function accepts a jQuery selection of a table row, as well as a cart item (an object containing the item name, quantity, and total price). The result is a filled-in template ready to be inserted into our HTML document:

chapter_06/01_client_side_templating/script.js (excerpt)

function template(row, cart) {

row.find('.item_name').text(cart.name);

row.find('.item_qty').text(cart.qty);

row.find('.item_total').text(cart.total);

return row;

}

So for each new row of data, we need to copy the template, substitute our values, and append it to the end of the table. A handy way to copy a selected element is via the clone method. The clone method creates a copy of the current jQuery selection. Once you have cloned an element, the selection changes to the new element— allowing you to insert it into the DOM tree:

chapter_06/01_client_side_templating/script.js (excerpt)

var newRow = $('#cart .template').clone().removeClass('template');

var cartItem = {

name: 'Glendatronix',

qty: 1,

total: 450

};

template(newRow, cartItem)

.appendTo('#cart')

.fadeIn();

The template class is removed—because it’s not a template anymore! We then set up our cart item (in a real example this data would come from the server, of course), and then use our template method to substitute the data into the row. Once the substitution is complete, we add the row to the existing table and fade it in. Our code is kept simple and all our markup stays in the HTML file where it belongs.

Are there other templating techniques around? Oh yes, dozens! For very high-level requirements you might need to investigate alternatives, but the methods detailed above are common for most sites and are likely to be all you’ll need.

Browser Sniffing (… Is Bad!)

Browser sniffing is fast becoming a relic of the past, and is punishable by unfriending—or unfollowing—or whatever the Web equivalent of death is. This is hard for many people to believe or accept, because we’ve done browser sniffing for so long, and because it seems so much easier than the alternative (which we’ll look at shortly). Browser sniffing, if you’ve been lucky