CSE 190 M: Web Programming, Spring 2012

Homework 8 (Baby Names Redux) FAQ

Q: I'm lost. I don't really understand Ajax. What should I do?

A: Read textbook Chapter 12, particularly the case study. Look at the slides and programs from lecture, and the lab and section solutions.

Q: My page just sits there; nothing happens. How do I know whether an Ajax request is working properly or not?

A: Open your Firebug "Net" tab or Chrome debugger's "Network" tab. This tab will list all requests made by your page. You can click on a request to view the response that came back from the server.

Q: Why does my page load the list of names veeeeerrry slowly?

A: Use the DOM to add elements to the page. Don't just concatenate strings to innerHTML .

Q: The list of names is really long, so it is a pain to scroll down to the name I want to test. Is there a better way?

A: If the name select box has the keyboard's focus (such as if you click on it to open it), you can usually start to type the beginning of a name, and the box will jump to that name in the list. For example, to quickly select "Morgan", click the select box and type M, O, R...

Q: Sometimes the height I compute for a bar is a decimal, like 123.45px . What should I do about this?

A: Round down by calling parseInt.

Q: What happens with a 0 ranking?

A: It should be displayed as a 0-height bar.

Q: How do I test an Ajax failure/error case to see what my code will do?

A: To test onFailure, in your code that makes the Ajax request, change the request URL to some bogus URL on webster for a page that doesn't really exist. To test onException, try requesting a URL that is not even on webster, such as http://www.google.com/ .

Q: What should happen to the "loading..." divs if there is an error?

A: On any error, you should hide all of the loading divs. Since this is not super clear in the spec, we will probably be somewhat lenient about exactly what happens to the loading divs when an error occurs.

Q: My Ajax requests aren't working. When I debug them in Firebug's Net tab, I see "OPTIONS" and an XML processing error. Why?

A: This happens when you're requesting an HTTPS URL from a regular HTTP site or vice versa. It's probably that you put a complete URL such as "http://webster..." in your code rather than just a relative path. Or change your URL in your code to say "https" rather than "http" or vice versa.

Q: How do I remove an existing element from the page?

A: Thanks to Prototype, for most elements you can say $("elementID").remove();

Q: If I have displayed an error message on the screen, and the user selects another name, should the error stay on the screen or go away?

A: It should go away.

Q: After a little bit of time testing my page, it will stop running any Ajax requests. The request doesn't even show up in the NET tab in Firebug. It can be fixed by closing and reopening the window. Why is this happening?

A: It may be due to webster's security. When you log in to webster with your UW NetID, it puts a "cookie" on your computer that remembers your login info. After a while, the cookie expires. If the cookie is expired, you can get a new cookie by refreshing the page in your browser; it should make you log in again, and then Ajax requests should work. Maybe your login cookie expires and it makes you log in again before any more Ajax requests will go through.

Q: When an Ajax request is made, first it runs my onSuccessr handler, and then it also runs my onFailure or onException handler! Why is it running both?

A: You probably have a coding error in your onSuccess handler. One odd thing about Prototype's Ajax.Request is that when you have a JavaScript syntax error or runtime error (such as dereferencing a null pointer) in your onSuccess code, it treats this the same as if the request itself failed. The syntax/coding error causes an exception, which causes the Ajax.Request to execute your onException handler. Check the syntax of your onSuccess code for errors (use JSLint, etc.) and try again.