JavaScript, jQuery problem – not so obvious

I supposed that everyone was in that place, where Javascript wasn’t working. And you were like “everything is ok, there are no mistakes, why the hell this isn’t working” and you wanted to throw things, and kill everyone around cause it’s not your fault and everyone is stupid. But then it turns out that, oops, i missed that thing that broke everything. Know the feeling?

I came across two things (at the moment) that can make you feel like that, and they are not so obvious. Well, for me they weren’t.

1. Javascript and our always loved IE.

My Problem: I’m 100% sure that everything is ok with my script. It’s working everywhere even on IE. But then, the client is saying that it’s not working in that [email protected]#$%^ thing called IE. And you’re like, “whaaat? it works for me”. You double check. Everything is perfect. It works on your computer, on your laptop, on your designers computer, but client like mantra repeats with capitals: IT’S NOT WORKING.

My Solution: This gonna be funny. The problem was – debugging. Yep. This is not a joke. I forgot to delete “console.log()” line from the script (and the funniest thing, I even add few of those). It turns out, that if you don’t have “Developer tools” enabled in IE the javascript is working till the console.log line, and after that, it breaks. Just like breakpoint.

So if your client is saying that Javascript isn’t working in IE, make sure you deleted all you console.log(). Most clients doesn’t use “Developer tools”.

2. jQuery – event fires (triggering) twice.

My Problem: I’m 100% sure that everything is ok with my script (ok thats a lie, but still everyone is sure at some point ;o)). I have some events that must be set at certain subpages (not all), so I’m creating some JS fragments in that views. Everything is ok, until it isn’t. My click events fires twice. Other events from my $(document).ready() are triggered twice. And I’m like “whaaat? What the hell?”. So I double check if views are loaded only once, if there is double events or whatever. There is no way that I could do something wrong here. I’m doing it exactly how I was doing it many times before.

My Solution: Ok, so it turns out, that if you have multiple $(document).ready() functions you need to be careful. The only place you can put them is external file, in your <head></head> section or just before </body> closing tag. If you have only one function like that it doesn’t matter where you place it (from the performance point of view it does, but that’s a diffrent story).

Anyway if your events fires multiple times, check if your $(document).ready() function is only in one of places I listed before. Placing it somewhere incan give you a headache.

My PS: I assume that this problem can occur while still in development ;o) Cause you know. JS should be placed in external file and so on.

And for now that’s all. I didn’t face so far any other “not so obvious” problems ;o) I hope that this won’t change for a while.