Why is ColorBox not loading properly?

Question

The error I get is:

$ is undefined Line 8

which is:

$.colorbox({html:'<p>TEST TEST</p>'});

This is how the page renders:

<script type="text/javascript" src="/sites/all/modules/jquery_update/replace/jquery.min.js?Y"></script>
<script type="text/javascript" src="/misc/drupal.js?Y"></script>
<script type="text/javascript" src="/sites/all/modules/fivestar/js/fivestar.js?Y"></script>
<script type="text/javascript" src="/sites/all/modules/extlink/extlink.js?Y"></script>
<script type="text/javascript" src="/sites/all/modules/signwriter/signwriter.js?Y"></script>
<script type="text/javascript" src="/sites/all/modules/thickbox/thickbox.js?Y"></script>

<script type="text/javascript" src="/sites/all/modules/ubercart/uc_roles/uc_roles.js?Y"></script>
<script type="text/javascript" defer="defer" src="/sites/all/modules/admin_menu/admin_menu.js?Y"></script>
<script type="text/javascript" src="/sites/all/libraries/jquery/colorbox/jquery.colorbox.js?Y"></script>
<script type="text/javascript" src="/sites/all/modules/mysite/mysite_module/js/sasapp.js?Y"></script<--($.colorbox({html:'<p>TEST</p>'});)

Answer 1

You are not including jQuery properly, please check the source and confirm that you first script src is actually the jQuery source.

Answer 2

jQuery has a function that allows the jQuery library to be compatible with any other libraries that use $ as function name; if one of the script is causing jQuery to run in compatible way, then the function $ is not defined from jQuery, and you can only use jQuery() to access any jQuery functionality.

If the code in sites/all/modules/jquery_update/replace/jquery.min.js is not corrupted, and it's not a problem caused from the browser, then that is the only possibility I can think of.

To be sure it's not another problem, I would use a non minimized version of the jQuery library. I had some problems with a minimized jQuery library, with some browsers (mainly Internet Explorer 6, but the issue could be present in different browsers).

Answer 3

I suspect that you are calling the function before jquery or colorbox has loaded.

Try changing the call to and put it below the line where you declare the jquery call.

$(document).ready(function(){
  $.colorbox({html:'<p>TEST TEST</p>'});
);

This will wait for the scripts to load before trying to call the function.