How to use jQuery in a Sails controller. (“$ is not defined”)

Question

I try to implement synced multiple find queries in a controller function. Jquery.js is placed before **/* in the gruntfile. I use Sails v0.9.4. First error:

"$ is not defined"

occurs here:

var dfd = $.Deferred();

I am new to JS and relatively new to Sails and my pretty long research for that question was absolutely successless.

Thanks in advance, Martin

PS: gruntfile excerpt:

var jsFilesToInject = [
'linker/js/socket.io.js',
'linker/js/sails.io.js',
'linker/js/app.js',
'linker/js/jquery.js',
'linker/js/jquery.validate.min.js',
'linker/**/*.js'
];

controller excerpt:

var dfds = [];
var seriesLists = [];

function checkForWord(word,place) {
  var dfd = $.Deferred();
  Series.find({seriesname:{'contains':'word'}}, function (err,sers) {
    seriesLists[place] = sers;
    dfd.resolve();
  });
  return dfd.promise();
}

for(var k=0;k<words.length;k++) {
  dfds.push(checkForWord(words[k],k));
}

$.when.apply($, dfds).then(function() {
  console.log("seriesLists:",seriesLists);
});

}

Answer 1

You should take into account that:

1. The controller lives on the sailsjs side, which means: is on the server (nodejs) side.
2. The grunt file is injecting the jquery library to the html that will be interpreted in the client (browser) side.

That's why the controller is not capable to see the jquery library. If you want to do have jquery in the server side (which I find somehow odd) you should include it with npm:

npm install jquery

or the more appropriate:

npm install node-query

anyway, if what you are looking for is promises support, then you can just use q (which is one of the most used promises libraries out there, either for the client side or the server side). On the server side, you can install q like this:

npm install q

(unless of course I'm completely wrong and you are doing a "client-side" controller :).

Answer 2

Check the order in which you are including jquery on your head section.

Make sure it's getting included once on your page and before this line

var dfd = $.Deferred();

Answer 3

on sails version 0.11 jquery load after bootstrap, for put jquery first and dont appear a error, my app must had loaded jquery before for bootstrap work correctly

You must go to this path on your sails 'tasks/pipeline.js' and put this 'js/dependencies/jquery-version of your jquery-.js' inside of var jsFilesToInject = [-here-] between 'js/dependencies/sails.io.js' and 'js/dependencies/**/*.js' like following:

// Client-side javascript files to inject in order
// (uses Grunt-style wildcard/glob/splat expressions)
var jsFilesToInject = [

  // Load sails.io before everything else
  'js/dependencies/sails.io.js',
  //For make your jquery load first
  'js/dependencies/jquery-2.1.1.js',

  // Dependencies like jQuery, or Angular are brought in here
  'js/dependencies/**/*.js',

  // All of the rest of your client-side js files
  // will be injected here in no particular order.
  'js/**/*.js'
];

for example, this is a bad configuration:

var jsFilesToInject = [
'linker/js/socket.io.js',
'linker/js/sails.io.js',
'linker/js/app.js',
'linker/js/jquery.js',
'linker/js/jquery.validate.min.js',
'linker/**/*.js'
];

because jquery will load after than app.js, if in your app, you will use a jquery function will appear a error