Using jquery-ui in ClojureScript with jayq

Question

I am trying to use jayq with jquery.ui.sortable to make a list on a sort page. Looking at http://jqueryui.com/demos/sortable/ , it looks like it should be as simple as that:

(.sortable ($ :#sortable)) 

Compiles to:

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

And throws away:

 Uncaught TypeError: Cannot call method 'call' of undefined 

when I try to include it on the page. Interestingly, the generated code works on the page when I insert it into the js console, which implies for me something necessary is loaded after this line is executed.

I changed

 (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 seems to be insufficient. I assume jquery.ui modifies $ Prototype, but I'm not sure how to do this in clojurescript

I also use noir and noir-cljs if that matters.

Looking at using jQueryUI with a closure compiler , it might just be that for jquery-ui you need a manual externs file to use, possibly for a large enterprise. Can anyone confirm?

Answer 1

To address this issue, there were two separate aspects.

• To compile in advanced mode, I need to add the following to the externs file.

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

• I am using noir-cljs and the following was in my view template:

   (: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 never work, as jquery-ui code should be included after jquery, but before the generated ClojureScript. The solution is to manually enable the libraries on the page:

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