jQuery not working from external js file?


I had faced this issue in one of my development projects. I used jquery lavishly in every bit of my javascript code. Since during development, i used to write the scripts in the page itself, i didn’t have to bother much. But later when i decided to move the scripts to another external “.js” file, i found all my jquery methods failing. The common error being : $ not defined. After a lot of trial and errors, i was able to get to the bottom of the issue.

The solution:

You can have only one $.document(ready(){}); in the whole application. Remove all the DOM readiness checkers and add a single one in the main js file that you will be loading always.

7 thoughts on “jQuery not working from external js file?

  1. Hello! I know this is kinda off topic however I’d figured I’d ask.
    Would you be interested in exchanging links or maybe guest writing a blog article or vice-versa?
    My site addresses a lot of the same topics as yours and I believe we
    could greatly benefit from each other. If you might be interested
    feel free to shoot me an e-mail. I look forward to hearing from you!
    Excellent blog by the way!

  2. Surab :
    Thanks a ton!.. I had the same issue..I was using multiple ” $.document.ready() ” in the code.. so jQuery wasn’t working..
    I used a single $.document.ready() and my code is working fine!!..

    1. Checking for readiness can be done a lot of times, I agree. But the issue i faced was in having a readiness check in my external js and simultaneously as obstrusive javascript on the master page.

      But then again at the end of the day, it gets rendered as multiple readiness checks, so may be the solution mentioned may not be accurate.

      However in my case, it solved the problem. May be specific to .Net way.

  3. Are you sure that was the problem. WordPress reserves $ for prototype, not jQuery. You need to use jQuery instead of $ or do the jQuery.noConflict thing

    1. The noconflict is the solution to another problem, when it comes to integration of jquery with BlogEngine .Net or WordPress or any such systems with integrated scripting prototypes. Under such cases, you will have to use the noconflict. Check my post on jquery integration with BlogEngine
      https://aackose.wordpress.com/2010/02/22/jquery-integration-with-blogengine-net/

      But the problem i am describing here is that of jquery not working for external js files. Say in your project, you might have written jquery codes in the html or ASPX or PHP page. And now you want to move it to some external js file say ‘myscripts.js’. In that case, jquery breaks, even the site has $ being reserved. Problem is not with the use of $, but with the use of multiple $.document.ready() throughout your site.

      1. Thanks a ton!.. I had the same issue..I was using multiple ” $.document.ready() ” in the code.. so jQuery wasn’t working..
        I used a single $.document.ready() and my code is working fine!!..

Feel free to leave a reply here...

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s