Using jquery-ui in ClojureScript with jayq

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 clojure…

Accepted Answer

There were two separate aspects to solving this.

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) { };
```

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
```

Using jquery-ui in ClojureScript with jayq

Solution

Problem