Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.
- Create BookmarkCreate Bookmark
- Create Note or TagCreate Note or Tag
- PrintPrint
CHAPTER 16: Refactoring the Example: Par... > Sourcing the Product Information - Pg. 469
CHAPTER 16 REFACTORING THE EXAMPLE: PART II Figure 16-2. Displaying an error message for Ajax The error is displayed until a successful request is made or another error occurs, at which point the elements are removed from the document. In addition to the events, I used the ajaxSetup method to define values for the timeout setting and to provide a converter for HTML fragments so that they are automatically processed by jQuery. Sourcing the Product Information The next change I am going to make is to remove the existing product elements and the loop that adds three additional flowers to the list, replacing them with a couple of Ajax calls and a data template. First, however, I have created a new file called additionalflowers.json, which is shown in Listing 16-4. Listing 16-4. The Contents of the Additionalflowers.json File [{"name":"Carnation","product":"carnation"}, {"name":"Lily","product":"lily"}, {"name":"Orchid","product":"orchid"}] This file contains a basic JSON description of the additional products I want to display. I am going to get the main set of products as an HTML fragment and then add to the set by processing the JSON data. Listing 16-5 shows the changes. Listing 16-5. Setting Up the Products via HTML and JSON Obtained via Ajax <!DOCTYPE html> <html> <head> <title>Example</title> <script src="jquery-1.7.js" type="text/javascript"></script> <script src="jquery.tmpl.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"/> <style type="text/css"> 439
