Sorrop Sorrop - 1 month ago 12
Javascript Question

Jquery not working with meteorjs

I'm going through the first example of "Meteor in Action" book (myfridge app).
At the last step where we add drag and drop functionality for products, it seems that jquery is not recognized by my app. I chose the latest versions as the book is a little outdated.

I have included jquery CDNs as required in

/client/main.html
file

<head>
<title>myfridge</title>
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</head>


And in my
/client/main.js
I have included the necessary declarations for making
fridge
and
productList
droppable and
productListItem
draggable.

Template.fridge.onRendered( function () {
var templateInstance = this;

templateInstance.$('#fridge').droppable({
drop: function(evt, ui) {
var query = { _id: ui.draggable.data('id') };
var changes = { $set: { place: 'fridge' } };
Products.update(query, changes);
}
});
});


Template.productList.onRendered( function() {
var templateInstance = this;

templateInstance.$('#supermarket').droppable({
drop: function(evt, ui) {
var query = { _id: ui.draggable.data('id') };
var changes = { $set: { place: 'supermarket'} };
Products.update(query, changes);
}
});
});

Template.productListItem.onRendered( function() {
var templateInstance = this;

templateInstance.$('.draggable').draggable({
cursor: 'move',
helper: 'clone'
});
});


I've checked other posts with similar issues but it seems that the tips don't work for me.

EDIT: Error messages in console are

Exception from Tracker afterFlush function:
debug.js:41 TypeError: templateInstance.$(...).droppable is not a function
at .<anonymous> (main.js:9)
at template.js:119
at Function.Template._withTemplateInstanceFunc (template.js:465)
at fireCallbacks (template.js:115)
at .<anonymous> (template.js:208)
at view.js:107
at Object.Blaze._withCurrentView (view.js:538)
at view.js:106
at Object.Tracker._runFlush (tracker.js:511)
at onGlobalMessage (setimmediate.js:102)
debug.js:41 Exception from Tracker afterFlush function:
debug.js:41 TypeError: templateInstance.$(...).droppable is not a function
at .<anonymous> (main.js:22)
at template.js:119
at Function.Template._withTemplateInstanceFunc (template.js:465)
at fireCallbacks (template.js:115)
at .<anonymous> (template.js:208)
at view.js:107
at Object.Blaze._withCurrentView (view.js:538)
at view.js:106
at Object.Tracker._runFlush (tracker.js:511)
at onGlobalMessage (setimmediate.js:102)
debug.js:41 Exception from Tracker afterFlush function:
debug.js:41 TypeError: templateInstance.$(...).draggable is not a function
at .<anonymous> (main.js:34)
at template.js:119
at Function.Template._withTemplateInstanceFunc (template.js:465)
at fireCallbacks (template.js:115)
at .<anonymous> (template.js:208)
at view.js:107
at Object.Blaze._withCurrentView (view.js:538)
at view.js:106
at Object.Tracker._runFlush (tracker.js:511)
at onGlobalMessage (setimmediate.js:102)
debug.js:41 Exception from Tracker afterFlush function:
debug.js:41 TypeError: templateInstance.$(...).draggable is not a function
at .<anonymous> (main.js:34)
at template.js:119
at Function.Template._withTemplateInstanceFunc (template.js:465)
at fireCallbacks (template.js:115)
at .<anonymous> (template.js:208)
at view.js:107
at Object.Blaze._withCurrentView (view.js:538)
at view.js:106
at Object.Tracker._runFlush (tracker.js:511)
at onGlobalMessage (setimmediate.js:102)

Answer

Your error message is templateInstance.$(...).droppable is not a function which means your client/main.js does not have access to the .droppable() method made accessible by jQuery UI.

If all you need is the jQuery UI draggable and droppable functionality, you can install drewproud:jquery-ui-droppable with meteor add drewproud:jquery-ui-droppable.

Comments