Section 7 Sp 11

Zombie cats are cool.

[edit] Links

.

You don't need to edit any HTML or CSS; just JS code. We put up a skeleton of petit.js that adds the event handlers but they are empty for you to fill in.

Remember that Ajax can connect only to the same domain as your page. That includes the protocol. So if your Ajax requests are going to https://webster..., then you must view your page in the browser as https://webster.cs.washington.edu/..., not http: .

Start out by writing the "Part 1" code to fetch all breeds of cats or dogs using an Ajax.Request to get cats.txt or dogs.txt, then split the text by \n and display the breeds as li bullets. Create them with document.createElement and append them to the ul with an id of "breeds". This code is called getBreeds and ajaxListBreeds in the solution file. Keep in mind that this may be tricky to them since they haven't seen an example of splitting ajax.responseText before.
- (You don't yet need to declare the counter and breeds global variables; you can have the breeds be just a local variable for now. You only need these globals toward the end when you are implementing the Next link. It'd make more sense to evolve the code and make them global later.)

Then work on the "Part 2" code that displays info about the currently selected breed. You need to fetch the .html file for that breed from webster using Ajax. This time you can actually use an Ajax.Updater instead of Ajax.Request. Ajax.Updater is at the end of the Monday Ajax lecture slides. The .html file name is similar to the breed name, but you have to lowercase it and replace spaces with underscores. You also need to show the jpg image for the breed, with a similar lowercased underscored filename. This code is called displayBreedInfo in the solution file. You might want to write displayBreedInfo to take a string for the breed instead of an index for now, because you may not yet have a global array of breeds to index.
- (You don't yet need to write the parts labeled as "Part 3". You also probably don't yet need to write the 'convert' function because you are only converting a breed name to an image name once at this point.)

Then work on the "Part 3" code that enables the "Next" link. First you probably just want to show the image for what the next breed will be. Suddenly you will find that you want to know which breed is selected and which breed comes after that. The easiest way to figure that out is to keep the breeds in a global array and keep an int for which one is selected. (globals at top of solution file) So make that change. Now the task of going to the next one is just a ++ on the current counter, modded by the array length. Now is also when you probably want that convert() function to turn "Chow Chow" into "chow_chow".

The part about highlighting which breed is selected can come last. You can highlight an li using the provided "selected" CSS class. I suggest going back and giving each breed's li item an id that is the same as the breed name; for example, the bullet for Chow Chow would have an id of "Chow Chow". This will be useful so you can get them by id and highlight them. When you go to the Next breed, you also have to deselect all the other breeds by grabbing them with $$ and removing the "selected" CSS class from them. This code is located in nextClick and parts of displayBreedInfo.