Question

I’m trying to use jayq with jquery.ui.sortable to make a list on a page
sortable. Looking at http://jqueryui.com/demos/sortable/ it seems like it should be as
simple as:

(.sortable ($ :#sortable))

Which compiles down to:

jayq.core.$.call(null, "\ufdd0'#sortable").sortable();

And throws:

Uncaught TypeError: Cannot call method 'call' of undefined

when I try to include it in a page. Interestingly, the generated code
does work in the page when I paste it into the js console, which implies
to me that something necessary is loaded after that line is executed.

I’ve modified

(def cljs-options {:advanced {:externs ["externs/jquery.js"]}})

to

(def cljs-options {:advanced {:externs ["externs/jquery.js" "js/ui/jquery-ui.js]}})

after reading
http://lukevanderhart.com/2011/09/30/using-javascript-and-clojurescript.html
, which doesn’t seem to be sufficient. I’m guessing that jquery.ui
modifies the $ Prototype, but I’m not sure how to accomplish this in
clojurescript

I’m also using noir and noir-cljs, if it makes any difference.

Looking at using jQueryUI with closure compiler it might just be that jquery-ui needs a hand rolled externs file in order to be used, possibly a major undertaking. Can anyone confirm?

Answer 1

There were two separate aspects to solving this.

1. To compile in advanced mode, I needed to add the following to my externs file.

   $.prototype.sortable = function (a,b) { };
   $.prototype.disableSelection = function (a,b) { };
   

2. I’m using noir-cljs, and in my view template, had the following:

   (:require [noir.cljs.core :as cljs])
   (:use [hiccup.page :only [include-js]])
   ...
   (cljs/include-scripts :with-jquery)  
   (include-js "/js/jquery-ui.js")
   

But this can’t ever work, since the jquery-ui code needs to be included after jquery but before the generated ClojureScript. The solution is to manually include the libraries in the page:

(include-js "/js/jquery.js")
(include-js "/js/jquery-ui.js")
(include-js "/cljs/bootstrap.js") ;; Generated