Pesky space screwed up string comparison in javascript

Located in:

I implemented a small script to recognise IE 6 or 7 browsers and tell them to upgrade or switch away from IE totally. It's a jQuery fade-in box at the top of the page. After offering that the user should either upgrade or switch to another browser I provide a "hide this warning for the rest of your visit" link. Clicking the link sets a cookie value that is then used to hide the IE warning for the rest of the session. (ie. hide_ie_warning = 1)

Dev works, live does not

The functionality is simple enough and it was working fine on my development machine so I uploaded the script to my live server and expected to do a quick test and then get on with my Sunday. Lo' and behold, the warning displayed nicely (as expected) but telling it to hide itself for the rest of the session did nothing. The darn message kept coming back even though I had told it not to! Oh the joy of having a script work in one environment but not in another.

IE warning box and the link that should hide it for the rest of the visit

I began troubleshooting my javascript using the trusty alert technique. (ie. alert(cookieName + ' ' + cookieValue);) (couldn't really use Firebug since this was IE only behaviour) My code loops through the document's cookie object and when it finds "hide_ie_warning" (the cookie name for my IE warning) it returns the value. If it has a value of 1, then the IE warning should not display. Remember, on the development server this all worked fine but in the live environment it was broken. I tracked the broken part down to the cookie value always being returned "false" instead of 1. The only place that could happen was at the end of my cookie object loop where false is returned as the default action. But why wasn't it returning the proper value for the hide_ie_warning cookie?

When white space matters

The script looking for the "hide_ie_warning" cookie name was just using a string comparison - it expected to see "hide_ie_warning" == "hide_ie_warning". Alerting the cookie names while troubleshooting showed that "hide_ie_warning" was coming up properly. So why wasn't the darn code working?

It turns out that my troubleshooting alerts weren't showing (or I didn't notice) that cookieName was returning hide_ie_warning prefaced by a space (" hide_ie_warning"). Of course a comparison of " hide_ie_warning" == "hide_ie_warning" will not be true and instead of the cookie's actual value being returned, the code finished the loop and then returned the default "false". Grrrrrrrrrr. At least it was a simple fix, I just used cookieName.replace(" ",""); to get rid of the empty space and then the code worked.

The moral of the story: Don't forget to check the basics when (seemingly) simple conditional statements aren't working as planned!

No votes yet
Your rating: None

Social mediatize it!

Twitter Twitter Facebook Facebook     
How about that! I'm a Drupal association member.

Attention IE user!

It turns out you are using an outdated browser and my site might look a bit weird for you. (images are off colour, text gets cut off, layout is wacky) This is because your browser does not implement web standards. Please consider an upgrade.

Alternatively, you can try other browsers like Google Chrome, Mozilla Firefox, Opera or Apple's Safari. Every web developer on the planet will thank you! (and that's not really an exaggeration)

Hide this notice for the rest of your visit