$ is not defined - But i can see that it is and is being loaded

Question

I have an odd question.

I am trying to implement some simple logic on some radio buttons and checkboxes on my web application. However, when i attempt to run the application, i am receiving the following error in Firefox:

ReferenceError: $ is not defined

My jQuery:

$( document ).ready(function() {

alert("Test JS file is loaded");


jQuery('#CTRL').click(function () {

        jQuery('#CTRLDEC').attr('disabled', true);
        jQuery('#OUT').attr('value', 'N');

});

jQuery('#CTRL1').click(function () {

    jQuery('#CTRLDEC').attr('disabled', false);
    jQuery('#OUT').attr('value', 'Y');

});

});

When debugging in Firefox, i can see:

<script type="text/javascript" src="javascript/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="javascript/modernizr-2.6.2.min.js"></script>

And have checked the file exists, is named correctly and contains the plugin code.

As the site is using framesets (old web site that i will soon be getting rid of framesets), i can also see:

<script type="text/javascript" src="javascript/jquery-1.9.1.min.js"></script>

Is imported again..

Important twice shouldn't cause this issue, should it??

Answer 1

You likely have a conflict with jQuery's global $. Make sure you load jQuery before you run your main JavaScript, and for good measure, replace:

$( document ).ready(function() { ... }

...with:

jQuery( document ).ready(function() { ... }