• Choose a category
• All
• Classic-Fiction

By Root 1485 0

class called bordered that simply draws a border around the element. Of course, you can make a much more sophisticated CSS class with all kinds of formatting if you prefer.

3. Link an init() method.

As you’re beginning to see, most jQuery applications require some sort of initialization. I normally call the first function init().

4. Call the toggleBorder() function whenever the user clicks a list item.

The init() method simply sets up an event handler. Whenever a list item receives the click event (that is, it is clicked) the toggleBorder() function should be activated. The toggleBorder() function, well, toggles the border.

jQuery has several methods for manipulating the class of an element:

• addClass() assigns a class to the element.

• removeClass() removes a class definition from an element.

• toggleClass() switches the class (adds it if it isn’t currently attached or removes it otherwise).

Making an AJAX Request with jQuery

The primary purpose of an AJAX library like jQuery is to simplify AJAX requests. It’s hard to believe how easy this can be with jQuery. Figure 2-5 shows ajax.html, a page with a basic AJAX query.

Figure 2-5: The text file is requested with an AJAX call.

Including a text file with AJAX

This program is very similar in function to the asynch.html program described in Chapter 1 of this minibook, but the code is much cleaner:

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

The HTML is very clean (as you should be expecting from jQuery examples). It simply creates an empty div called output.

The JavaScript code isn’t much more complex. A standard $(document).ready function calls the getAJAX() function as soon as the document is ready. The getAJAX() function simply creates a jQuery node based on the output div and loads the hello.txt file through a basic AJAX request.

This example does use AJAX, so if it isn’t working, you might need to remember some details about how AJAX works. A program using AJAX should be run through a Web server, not just from a local file. Also, the file being read should be on the same server as the program making the AJAX request.

The load() mechanism described here is suitable for a basic situation where you want to load a plain-text or HTML code snippet into your pages. You read about much more sophisticated AJAX techniques in Chapter 6 of this minibook.

Building a poor man’s CMS with AJAX

AJAX and jQuery can be a very useful way to build efficient Web sites, even without server-side programming. Frequently a Web site is based on a series of smaller elements that can be swapped and reused. You can use AJAX to build a framework that allows easy reuse and modification of Web content.

As an example, take a look at cmsAJAX, shown in Figure 2-6.

Figure 2-6: This page is created dynamically with AJAX and jQuery.

While nothing is all that shocking about the page from the user’s perspective, a look at the code can show some surprises:

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

type = “text/css“

href = “cmsStd.css“ />