LOADING CONTENT BASED ON REQUEST

USING AJAX TO UPDATE CONTENT

Of the jQuery AJAX shorthand methods, load is the simplest and easiest method for retrieving information from the server. It is especially useful if you want to call on new information that does not need data passed to it like you would do with the get or post methods. The syntax for load is short and sweet as well:

$(‘a[href=”writeNew”]’).click(function(e){

e.preventDefault();

$(‘#newArticle’).load(‘inc/userWrite.php’);

FIGURE 4.6 The user’s photo-graphs in tabular form.

ptg

Clicking on the Write link (Figure 4.7) invokes the load function, causing chap4/

inc/userWrite.php to be loaded into the div with an id of newArticle.

There is one other really neat feature that load oﬀers: You can use it to bring in just portions of other pages. For instance, to bring in a div with an id of part1 from another page, the syntax is as follows:

$(‘#newArticle’).load(‘inc/anotherPage.html #part1’);

Having the option of loading page portions can give you a great deal of design and organizational ﬂexibility.

Not every Web site can use every AJAX feature that jQuery oﬀers, so you’ll leave the Photographer’s Exchange Web site behind at this point. You’ll develop stand-alone examples to demonstrate some of the other features and events available in jQuery’s AJAX library.

FIGURE 4.7 The form has been loaded into the page so that the user can write a new article.

NOTE: In Chapter 6, “Creating Application Interfaces,” you’ll use an example in which several widgets will be contained in one file that will be called by load as needed to complete the interface.

ptg LOADING SCRIPTS DYNAMICALLY

There are some cases in which you will need to load JavaScript or jQuery scripts just for one-time use in your Web pages and applications. jQuery provides a special AJAX shorthand method to do just that, getScript.

For this example, you’ll use the code contained in chap3/dvdCollection, which is a small personal Web site designed to be used as a catalog of all the DVD and Blu-ray Discs that you own.

From time to time, you’ll want to know just how many DVD and Blu-ray Discs you have, but it isn’t really necessary to load the script that performs the counts and displays the result every time you use the site. jQuery’s getScript method is the perfect remedy for loading scripts that you’ll use infrequently.

1. Set up a script called dvdcount.js and place it in the inc directory of the DVD collection site. This is the script that getScript will load when called upon to do so.

2. Include the document ready functionality:

$(document).ready(function(){

3. Each movie is contained in a div with a class of dvd. Assign the count of thosediv’s to the variable totalCount:

var totalCount = $(‘.dvd’).length;

4. Use jQuery’s :contains selector to help count the types of discs in the collection. The :contains selector is very handy for ﬁnding elements containing a speciﬁc string. Here it is used to ﬁnd the text “DVD” or “Blu-ray” in the h3 element:

var dvdCount = $(‘h3:contains(“DVD”)’).length;

var brCount = $(‘h3:contains(“Blu-ray”)’).length;

5. Set up the modal window to show the user the information. This is the same technique used in Chapter 2 and Chapter 3, so I won’t cover each step in detail:

var movieModal = ‘<div class=”movieModal”>Total Movies:

p '+totalCount+'<br />DVD: '+dvdCount+'<br />Blu-ray:

ptg $('body').append(movieModal);

var modalMarginTop = ($('.movieModal').height() + 40) / 2;

var modalMarginLeft = ($('.movieModal').width() + 40) / 2;

$('.movieModal').css({

'margin-top' : -modalMarginTop, 'margin-left' : -modalMarginLeft });

The modal will only pop up for a moment before fading out:

$(‘.movieModal’).fadeIn(‘slow’, function(){

$(this).fadeOut(2500, function() { $(this).remove();

});

The main page for the DVD catalog site is chap4/dvdCollection/4-5.php. Let’s take a moment to set it up.

1. Enter the information for the header:

<!DOCTYPE html>

<head>

<title>DVD Collection Catalog</title>

p type=”text/css” />

ptg 2. Include the jQuery ﬁle so that all of the interactions will run properly:

p src=”inc/jquery-1.5.min.js"></script>

</head>

3. Set up the body next:

<body>

<h2>DVD Collection Catalog</h2>

4. Set up the menu section carefully, because you’ll use these elements to call other scripts:

<li id=”summary”>Summary</li>

</ul>

</div>

<br />

5. Set up the div that will house the content of the page:

6. Create the section containing the jQuery scripts you’ll use to load informa-tion into the page along with the funcinforma-tion that loads chap4/dvdCollecinforma-tion/

inc/getdvd.php. The PHP is called by the jQuery load method to get the information about the DVD collection:

$(document).ready(function(){

$(‘.content’).load(‘inc/getdvd.php’);

ptg

7. Bind the click method to the list item with an id of summary. This will call getScript to run the jQuery script created earlier, dvdcount.js:

$(‘#summary’).click(function() { $.getScript(‘inc/dvdcount.js’);

});

</script>

8. Close out the HTML:

</body>

</html>

Clicking the Summary element on the Web page causes the dvdcount.js script to be loaded and run, showing the modal window complete with counts (Figure 4.8).

The modal window then slowly fades away.

FIGURE 4.8 Clicking on the Summary element loads and runs the dvdcount.js script.

ptg You will ﬁnd many cases where loading and running scripts on the ﬂy will

enhance your Web sites and applications.

Next, you’ll turn your attention to many of jQuery’s AJAX extras and learn how to apply them practically.

在文檔中 Applied jQuery (頁 125-131)