Javascript Conflicts

In one project I’m working on I’m apparently having javascript conflicts … at least that my working theory. I have two scripts running … both load correctly and work well one. But once a function on one script is triggered the other script stops working.

Is there an easy way to identify where the conflict is coming from?

Have you looked at the javascript error console? Anything interesting there?

Typically when I see the behavior you describe, it’s due to some sort of error in the javascript - you’re using an uninitialized variable, or trying to get to a DOM element that doesn’t exist, or some sort of syntax error.

Do the separate scripts share same-named identifiers?

Does more than one script call setTimeout() ?

(Disclaimer: I know Javascript barely well enough to have gotten my own simple scripts to work.)

Chrome and firefox offer a javscript console you can enable which will allow you to see any exceptions javascript is throwing.

You can also use things like alerts to act as breakpoints, allowing you to find where the javascript bombs.

Some IDE’s will have breakpoints and other debugging tools available as well.

Most (all?) modern browsers have pretty full-featured JavaScript debuggers now. As other people mentioned, you can start by looking for uncaught exceptions, although that might not necessarily explain the conflict.

If that doesn’t help, you can set a breakpoint and step through the script that stops working to determine where exactly it stops, at which point the “why” it stopped should hopefully be obvious.

My guess is that both scripts are trying to define/use the same variable in the global namespace. A lot of UI scripts (like jQuery for example) like to use the $ variable name, and aren’t compatible with each other for that reason.