Question

Here’s my code:

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>

<script>
 $(document).ready(function(){
    $( "#draggable" ).draggable();
 });
</script>

<div id="draggable" 
    style="
        position: fixed;
        left: 50%;
        margin-left: -100px;
        top: 30%;
        width: 200px; 
        background: rgba(255,255,255,0.66); 
        border: 2px  solid rgba(0,0,0,0.5); 
        border-radius: 4px; padding: 8px;
    "
>
   This is a test
</div>

As you can see I call the query 1.8.16 file before using it. But the first time I use jQuery it gives me the error:

Can't find variable $

which is about jQuery not being loaded. I tried to look in with the safari inspector and I’m sure the file is loaded correctly. The link is ok. I load the file and then execute the script.

Why am I getting this error then?

Answer 1

You are including jQuery UI but not the core jQuery library, you need to add :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

or download it here

Note – you need to include jQuery before jQueryUI