Download Firebug and view your XMLHttpRequests

I tell people to always download Firefox and install the Firebug extension. I normally get asked how do I see the XMLHttpRequests with it. Well I am tired of repeating myelf on forums so I thought I would post it here so I can point people to it!

If you have never used Firebug, it is going to change the way you develop JavaScript! The feature I want you to see is the allowing Firebug to show the XMLHttpRequest. By default it is not set, so we need to enable it. Rather easy, under options menu select ShowXMLHttpRequests. I hightlighted it in the screenshot below.

Now after you do this, you will be able to see the requests made. So I thought I would search my name on Google Suggest. Below shows you all of the requests made until my name shows up.

Firebug also allows us to look at the request in more detail. You can do that by clicking on the url in the Firebug window. It opens up the request details. (If you used post, it would show post details.)

If you would click on the line number, it would take you to that line number in the source code. Rather cool in my eyes. There are tons of features in Firebug, spend some time and play with it! Also I hope you did not miss my article on the IE Developer Toolbar! If you did go read it. One thing I wish I could do with Firebug is undock it like the IE Developer Toolbar. Sometimes Firebug takes up way too much space for what you are after, but I could not live without this tool. Tomorrow I will have an article on Drip.

Eric Pascarello
Coauthor of Ajax In Action
Moderator of HTML/JavaScript at www.JavaRanch.com
Author of: JavaScript: Your Visual Blueprint for building Dynamic Web Pages

The responseXML is null or has an error.
The steps to debug this situation!

I am not sure if it is the moon or the weather turning to fall, but there seem to be a lot of questions related to responseXML and "why am I not getting a value back when I use var xmlDoc = this.req.responseXML.documentElement?"

I have talked about this in the past: http://radio.javaranch.com/pascarello/2005/10/26/113034827699 6.html, but I thought I would put some more information in how to debug this error.

After answering the question a bunch of times in the past year, I found that the following questions will find the error 99% of the time:

1. Did you set your content type to text/xml?
2. Is your request actually making it to the server and back?
3. When you alert/examine the responseText, do you see anything that does not belong?
4. Open up the dynamic XML document in your browser directly. (Type the url into the browser. This may require you to hard code post parameters or build a test form.) The browser will tell you if your XML is not formatted correctly. Is it formatted correctly?

This is what the questions normally turn up:

1. No real explanation needed, but it seems to be one of the main reasons why people have errors with returning an XML document! Add a content type to your dynamic XML document and you are good to go!
2. Some people fat finger the address of the xml page and do not realize it. Server returns a can not find file page, a developer forgets to check for status code and they have a problem reading the XML document. (Tomorrow I will post a quick article on Firebug to show you how to test this easily!) Fix the URL and you are good to go!
3. I have had people that have shown me the responseText returned from the server with HTML markup in their so-called XML document. Why would this happen? They used response.write() to a normal page thinking that it will just return the XML. Remove the bad HTML code and you are good to go!
4. The number one cause of not being able to read an XML document from responseText is bad XML markup! People leave out the xml tag line, they have unescaped characters in the text, and so on. When the file is opened up directly in the browser, it normally points you directly to the error. IE is actually very good at it! Fix the bad markup and you are good to go!

Now hopefully this helps you find your error with reading the responseXML. If anyone else has some tips that I left out, feel free to add them to the comments.

Eric Pascarello
Coauthor of Ajax In Action
Moderator of HTML/JavaScript at www.JavaRanch.com
Author of: JavaScript: Your Visual Blueprint for building Dynamic Web Pages

Upcoming Talks that I am speaking at

September 30, 2006 - Oct 1, 2006 : Fairfax, Virgina
Ajax Boot Camp: http://www.intelliobjects.com/training_AJAXBootcamp.html

October 2-4, 2006 : Santa Clara, California
Ajax World Conference and Expo: http://www.ajaxworldconference.com/

October 10-12, 2006 - : Rapperswil, Switzerland
Swiss Open Systems User Group: http://www.ch-open.ch/wstage/06/ws8.html

Eric Pascarello
Coauthor of Ajax In Action
Moderator of HTML/JavaScript at www.JavaRanch.com
Author of: JavaScript: Your Visual Blueprint for building Dynamic Web Pages

Meet Ajax, he has four legs

Just to prove to you how much of a geek I am, I named my dog after the programming term Ajax. I told my wife it was either Fonzie or Ajax.

We got Ajax a few months ago from a rescue. He is a border collie and he may be mixed with something else. No one is sure exactly if he is or is not mixed. He is rather large for his breed about 50 pounds and taller than an average border. He is a smart dog that is lazy as can be! He graduated top of his obedience class. (Sounds great until you realize there was only 5 dogs in the class!)

Now when I take him to the dog park, people look at me strange when I say his name is Ajax. They all say: "You named him after a cleaner!" and I always respond with "yep". My wife normally has to say: "He is named after my husband's best selling book."

I personally like my answer because it requires no additional explaination. My wife's has to deal with a conversation. I am there to watch my dog chasing other dogs, not to do one of my speeches!

Once in awhile another fellow geek will be there and know what Ajax is. They would try to explain it to their significant other and usually will give up as they see their eyes glaze over with the geek speak! You all know what I am talking about!

WIFE :"Honey how was your day at work?"
ME :"Well I coded a recursive function that had to do 10,000 iterations with an embedded object that was created dynamically from a child function that was derived from alien that lived on Mars with 20 siblings that had no UFO since the wife ran it into Neptune when she was too busy trying to talk on her cell phone and crush her hair with the windows open sucking all of the oxygen out of the car but she had enough to talk on the phone for 5 hours and wonder why the battery died and she forgot she was driving and ran into the planet and had to call AAA to tow her all the way home and yell that it cost....."
WIFE :"zzzzzzz
ME :"...and now what is for diner"
WIFE :""Oh, that sounds nice! Frozen peas and that is it because I did not have time to run to the store."

One week I went to the dog park with one of my Ajax T-Shirts I got from a conference and a regular at the dog park walked up to me and said: "You got a shirt printed with your dog's name on it!?! Aren't you going a little overboard?"

I just responded: "I guess I love my dog more than you love yours!" That guy has not spoken to me since than! Well I thought I would let you into my personal life a bit, now to close it back up!

Eric Pascarello
Coauthor of Ajax In Action
Moderator of HTML/JavaScript at www.JavaRanch.com
Author of: JavaScript: Your Visual Blueprint for building Dynamic Web Pages

JavaScript Error: "Could not get the cursor property"

I thought I would pull another error to pull from my logs that I found interesting for a Friday post. (For those that do not read my blog, I log my clientside errors to the server, see this.)

The Error

Browser: Mozilla/4.0 (compatible; MSIE 5.5; Windows NT 5.0)
NAME:    Error
DESC:    Could not get the cursor property. Invalid argument.
MSG:     undefined

Well the function that the try catch caught this expection contained the following basic code:

myObject.style.cursor = "pointer";

We all know that IE used hand in earilier versions so I changed my code to do this:

try{
  myObject.style.cursor = "pointer";
}
catch(eOldIEVersion){
  myObject.style.cursor = "hand"; 
}

Since I have added this fix, the IE 5.5 error has not shown up in my logs. I also tested this on my virtual machine running Windows 98 and IE 5.0. The result showed the hand and did not report an error.

Eric Pascarello
Coauthor of Ajax In Action
Moderator of HTML/JavaScript at www.JavaRanch.com
Author of: JavaScript: Your Visual Blueprint for building Dynamic Web Pages

Internet Explorer Developer Toolbar

After talking with some developer friends, it seems that no one knew about the Developer Toolbar For Internet Explorer 6+. The toolbar is not as good as Firebug for Firefox, but it makes development a little bit easier for IE.

The toolbar has the following menus: View Dom, Disable, View Outline, Validate (A good laugh when I saw that), Images, Resize, Misc, and Show Ruler. (Sorry about the crappy compression I used on all the photos!)

This is the toolbar:

This is a screenshot of the DOM Explorer. (click on it for larger view)

Notice that it is undocked. The DOM Explorer can be docked at the bottom of the window too. (But that is not enough room for the detail panels IMHO). Also notice it does the highlighting in the browser. The calendar has a blue border.

This is a screenshot of the ruler with 4 "fun" colors!

The ruler seems to have some flashing issues when I use it. It blinks on and off when I drag and and hold the cursor over it! Other than that it is good for estimates.

There are a lot of other neat things I did not take screen shots of. List all the css classes on the elements, show the links full address, clear cache link, delete cookies, links to the validator services, and a lot more. It is worth the couple of seconds to download and install it. I have had no major issues yet with this beta 2 release running on IE 7.0.5700.6 other than the toolbar wanting to take up two lines and the flashing ruler I mentioned above. I had no crashes with IE 7 since I installed it a couple of days ago either (knocks on wood as I type this blog in IE!)

The toolbar has some neat features, but it still has a long way to go to win our hearts! If you would like to download the toolbar, you can get it from here: http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en

Remember to check out the Ajax boot camp being held in Fairfa, Va: Camp Details

Eric Pascarello
Coauthor of Ajax In Action
Moderator of HTML/JavaScript at www.JavaRanch.com
Author of: JavaScript: Your Visual Blueprint for building Dynamic Web Pages

JavaScript Errors caused by a Proxy

The other day the company I work for released a new version of our application. I log onto my computer the morning after the release and see all of the errors reported from the JavaScript. Nothing new, I have thousands of lines of JavaScript, have 3rd party code, and implemented new libraries so there is bound to be some errors. We can not test every single browser configuration out there with our limited test team and developers.

Everyone that works with JavaScript knows that something will slip through when you have such a wide variety of browsers. Outside factors such as Firefox extensions, Ad blockers, popup blockers, and browser plug-ins can screw with your code. I have seen problems with Norton Internet Security (NIS) and also the Firefox extension Adblocker. The Adblocker blocked a tracking script and caused an error to show up on the browser. Not good. Would you have tested that? Does the user have NoScript installed and cut off your JSON requests to outside domains? Is stuff being injected into your responseText? And so on. Only way to know of problems is by user complaints and logging of clientside errors.

I know some of you are saying: "Wait a minute, did you just say you saw JavaScript errors in your server logs?"

If you seen me talk at any of the local user groups or conferences, you than know I track every error in my Ajax applications. The clientside is an alien world! We have no clue what is going on there. If a user with a unique setup comes along and throws an error, we may never know. So I implement error logging so I do know.

If you are interested in logging errors, the basic slides from one of my talks can be found here: www.pascarello.com/presentation/CMAP_ERRORS/Tracking_ClientSide_Errors.ppt. That gives you the very basics of error handling with window.onerror and try/catch. The talk contained all of the little details, the slides were the general info so it is lacking the meat! The slides are basic, but give you a good starting point.

Now back to my topic, so I looked at my error log. To my horror I saw tons of clientside errors. I was about to run out the door since I know the boss would be at my desk asking if I even tested my code. So I open up one error and I see

Browser: Mozilla/4.0 (compatible; MSIE 6.0; AOL 9.0; Windows NT 5.1; SV1; .NET CLR 1.0.3705; .NET CLR 1.1.4322; Media Center PC 3.1) 

I open up another and I see

Browser: Mozilla/4.0 (compatible; MSIE 6.0; AOL 9.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322). 

I open up error after error and every one was AOL users. I look at the other information in my log and realize that it is being fired with window.onerror and it is looking for a new object that I added to this release. That had me thinking and I was walking around with my Yo-Yo saying: "I added a new object and AOL users can not see it."

Whenever my co-workers see me with a Yo-Yo, they know I am stressed! I look at the log even more and I realize that it is using my old error handler to log the error.

The light bulb went off and I knew something has cached all of my JavaScript files. It can not be a local proxy since it is not happening to everyone. It only seems to be happening with AOL users so it has to be something with AOL.

AOL uses a proxy which is good and bad for us as developers. If you want to read about it like I did here is all of their information: http://webmaster.info.aol.com/proxyinfo.html. Basically our headers were not set up to expire the way AOL liked so it basically did not check for new files. I have no problem with this since the JS files normally do not change. But when the files do change, we have the issue.

What to do? I know I can sit there and rename all of our files, but I know I am lazy and do not want to have to do this every single time I make a JavaScript change. What we ended up doing is appending a query string value to the JavaScript files. This forces a new lookup when the browser encounters it for the first time. We did it so that this value is obtained from a global variable so can change the variable and all of the JS files will change. As soon as we released the patch, AOL errors disappeared from the logs.

So now we get the benefit of our files being cached on the user's machines and other proxies along with the ability to send out updates without worrying about the expired headers. Hopefully this will help others out there when you are dealing with a lot of JavaScript!

Eric Pascarello
Coauthor of Ajax In Action
Moderator of HTML/JavaScript at www.JavaRanch.com
Author of: JavaScript: Your Visual Blueprint for building Dynamic Web Pages

Ajax Boot Camp: September 30th and October 1st in Fairfax Virginia!

If you have not heard already from reading my blog, I am running Ajax boot camps! The reason why I wanted to do boot camps is that I see so many new developers in the realm of Ajax using it the wrong way. I see it when I consult with companies, answer questions on forums (such as Ajax In Action's forum, codingforums.com, webdevelopers.com, google groups on Ajax, AjaxFreaks.com, other forums), and personal emails I receive. One bad mistake in an Ajax based application can result in crashing a server or loosing half of your traffic due to a bug. Those are just two things that can happen.

My first boot camp is only a few weeks away on September 30th and October 1st in Fairfax Virginia! We have a few spots remaining and they are filling up quick!

Instead of me reposting all of the course details here on my blog, you can visit IntelliObject’s website to get all of the details including how to sign up.

If you have any questions, feel free to ask me here in the comments or via email askEric@pascarello.com. We will be announcing future cities in a few weeks.

I want to take my real world experience working with Ajax and share it to developers through hands on learning. During these sessions, I set up time to sit down with every individual/team and discuss your needs with Ajax and what will help you. So you will get hands on work with sample projects, participate in group discussions, and get one on one time for personal questions.

Eric Pascarello
Coauthor of Ajax In Action
Moderator of HTML/JavaScript at www.JavaRanch.com
Author of: JavaScript: Your Visual Blueprint for building Dynamic Web Pages