ReferenceError: $ is not defined jQuery Colorbox

few days ago I was using jQuery colorbox it was working perfectly fine however after I upgraded to jQuery v1.11.0 it suddenly stopped working completely.

Using firebug to check for any errors I found the following;

ReferenceError: $ is not defined $(document).ready(function(){

This code below now acts as a normal href.

<script src="http://code.jquery.com/jquery-1.11.0.min.js" defer="defer"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js" defer="defer"></script>
<script src="https://raw.github.com/jackmoore/colorbox/master/jquery.colorbox-min.js" type="text/javascript" defer="defer"></script>
<link id="stylesheet" type="text/css" href="js/popup/box/colorbox.css" rel="stylesheet" />

    <script type="text/javascript">
    $(document).ready(function(){
        $("a.popup").colorbox({iframe:true, innerWidth:680, innerHeight:401});
    });
    </script>

<a class="popup" href="/core/ajax/status.php?ID=143" title="Status">View Status</a>

Solution

It is because you have defered the loading of jQuery, so when your inline script block is executed jQuery is not yet loaded.

The defer attribute of script tells the browser to dealy the loading of script till the document is parsed

Don't defer the loading of jQuery

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://raw.github.com/jackmoore/colorbox/master/jquery.colorbox-min.js" type="text/javascript"></script>

Another choice is to make your script also to execute in a deferred manner by moving it to a separate js file and including it as a deferred resource like

<script src="http://code.jquery.com/jquery-1.11.0.min.js" defer="defer"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js" defer="defer"></script>
<script src="https://raw.github.com/jackmoore/colorbox/master/jquery.colorbox-min.js" type="text/javascript" defer="defer"></script>
<script src="test.js" defer="defer"></script>