Question

I’m trying to create a meteor app using jquery UI features.
However I’m not able to get it to work. The meteor app frame is working fine, but once I start using jQuery UI, I get errors like:

$("#draggable1").draggable is not a function

in the Firebug console.

I tried including the jquery and jquery UI package multiple ways:

1. added the jquery package
2. referenced jquery and jquery UI locally, from a folder \client\js\libs in my meteor app folder
3. just had the files in client\js\libs, without referencing them in my html file.
4. referenced the CDN versions of jQuery and jQuery UI in my html file

In each case according to firebug, the javascript files seemed to load fine. But codes like the following did not work at all (in my 3views.js file — 3views is the name of my meteor app):

if (Meteor.is_client) {

    $( "#draggable1" ).draggable({ revert: "invalid", snap: ".ui-widget-header", snapMode: "inner", snapTolerance: 100 });

...

And in my 3views.html:

...
<div id="draggable1" class="ui-widgetc-content draggable_box">
<img id="imgpair1" src="objects/obj_pair1a.png" class="objectpair">
</div>
...

What is the proper way to use jQuery UI widgets?

Answer 1

Probably your version of the library does not have the draggable widget. Go over to the download builder and include it.

Also, check that you have included jquery first and then the script for jqueryui.

Like..

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.8.23/jquery-ui.min.js" type="text/javascript"></script>