AJAX In Action [258]
Licensed to jonathan zheng Additional functionality 529 13.5.1 Inserting additional feeds Adding additional messages to our feed is easier than you may think. Take a look at figure 13.9 again. The selection list contains the names and URLs of additional feeds we want to check occasionally; we just select a name and click the Add Feed button. We have already built most of the functionality in section 13.3; all we need to do now is execute our ContentLoader, in listing 13.14, which will add the feed selected in the select element. Listing 13.14 JavaScript function to load additional RSS feeds function LoadNews(){ var sel = document.Form1.ddlRSS; if(sel.options[sel.selectedIndex].className!="added"){ var url = sel.options[sel.selectedIndex].value; sel.options[sel.selectedIndex].className="added"; var loader1 = new net.ContentLoader(url, BuildXMLResults); } } We create a function called LoadNews() that we initiate from our button named btnAdd. Since we are obtaining the additional RSS feeds’ URLs from a select element, we need to reference our select element, ddlRSS, so we can access its values. Figure 13.9 The fading transition is taking place between message 5 and 6. Licensed to jonathan zheng 530 CHAPTER 13 Building stand-alone applications with Ajax When we want to add an RSS feed from the select element, we need to have some way to tell if it already has been added. One way to do this is to add a CSS class to the option element. Therefore, we need to add a check to verify that we have not added this RSS feed already. If the feed is new, we grab the value of the selected option and change the className to added. We execute the ContentLoader with the URL of the feed and also the function BuildXMLResults(). We can use the default error message of the ContentLoader if it encounters an error. Now that we have the ability to load a document from the selection list, we need to add RSS feeds to the selection list and also add the event handler to the button, shown in listing 13.15. Listing 13.15 HTML selection list value="Add Feed" onclick="LoadNews()" /> In the selection list, we add URLs to RSS feeds that are not contained in our preloader RSS feed array. In this case, two additional RSS syndication feeds were added from JavaRanch’s radio blog. We add the onclick event handler to our button btnAdd so the function LoadNews() can be executed. The last step to loading the individual feeds is to create a CSS class to add to our stylesheet. This gives an added benefit to the users by giving a visual aid that the feed has been loaded. .added{background-color: silver;} In the CSS class, we can add any CSS rule so we are able to distinguish the added feeds from the others. In this case, we change the background color of the option to silver so that the option stands out in the list. After we add the class, we can test our application. As figure 13.10 shows, we have added the RSS feed of Frank since it is highlighted in silver. The feed labeled Gregg is not added since it still has the default white background color. The number of messages in our RSS reader also Licensed to jonathan zheng Additional functionality 531 Figure 13.10 The Frank feed has been added to the Ajax reader. increased from 31 to 54 after we added the feed. The only features remaining to add are our back, forward, and pause buttons. 13.5.2 Integrating the skipping and pausing functionality One of the most useful features that we can add is the ability to skip through messages. If we find a message that is not interesting to us, we