• Choose a category
• All
• Classic-Fiction

$(selector).clone(true);

If set to true (false is the default), the function performs a deep copy of matching elements, including attributes and descendants plus event handlers.

The jQuery Cache

In client Web applications, data storage is an area of growing importance, and the work behind done on it around the HTML 5 specification confirms this fact. Some browsers currently support forms of local storage even though the API is not unified yet. Local storage is persistent and is meant to replace certain use of cookies in the long run—for example, to store user-specific data. An in-memory cache is a different kind of thing, but it still has its own space.

Cached Data and DOM Elements

The jQuery library offers a simple but quite effective API to store data in the browser’s memory for the duration of the session. Any data you park in the jQuery cache is lost once you close the browser window. The jQuery cache is centered on the data function. This method allows you to associate some arbitrary data with all elements that match the selector.

Note that most of the time, though, you’ll use selectors that match just a single DOM element. If multiple elements are selected, no data duplication will ever occur—only the reference is duplicated, not the data.

The jQuery cache is implemented as a plain dictionary where each element is characterized by a name and a value. What about naming conventions to ensure uniqueness of entries? Binding data to DOM elements, in full respect of the jQuery philosophy, is also helpful because it makes it significantly simpler to name elements. Cached entries can have the same name as long as they are bound to different DOM elements.

Working with Data in the In-Memory Cache

To add data to the cache, you select the DOM elements and then invoke the data function, passing the key and value.

$("#Grid1").data("DataSource", value)

The cache is fairly useful for storing data you download once and reuse frequently within the page. When you have a master/detail view and you get data for the detail view via Ajax, a call to the data function can save you roundtrips within the same session. Have a look at Figure 21-4.

Figure 21-4. An Ajax page that retrieves customer details from the server.

Every time the user selects a letter, the page downloads the list of all customers whose name begins with the letter. If the user clicks twice on, say, “A,” the list of customers is downloaded only once. Here’s the script code that manages the clicking:

// Attempt to grab data from the cache first

var data = loadFromCache(selection);

if (typeof (data) !== 'undefined') {

fillViewInternal(data, true);

return;

}

// Grab data from the server asynchronously

loadFromSource(selection);

Inside of the loadFromCache function, you simply build the key and place a call to the data function:

function loadFromCache(query) {

var key = "Customers_" + query;

var cachedInfo = $("#RootView").data(key);

return cachedInfo;

}

Inside of the loadFromSource function, instead, you store downloaded data right into the cache object:

var key = "Customers_" + query;

$("#RootView").data(key, downloadedInfo);

Once it’s placed in the cache, the data never expires and must be removed manually to free up memory. To remove a piece of data from the cache, you use the removeData method:

$("#RootView").removeData(key);

Ajax Capabilities

Ajax support in jQuery is centered on an abstraction of the browser’s XMLHttpRequest object and counts on a bunch of helper functions that address specific scenarios, such as getting a JSON response, getting a script file, or performing a cross-domain call.

Plain Ajax Caller

In jQuery, to compose and control all aspects of your Web request, you use the ajax function, as shown next:

$.ajax(

{

type: "POST",

url: "getOrder.aspx",

data: "id=1234&year=2010",

success: function(response) {

alert( response );

}

}

);

The ajax function gets a list of parameters, such as type, url, data, dataType, cache, async, and success.