JQuery UI sortable() method not supported error

Question

I'm developing an ASP.NET MVC 4 web application, which utilises the latest JQuery and JQuery UI libraries, and automatically has references to them (in the _Layout.cshtml page).

I've been following the tutorial here to implement drag and drop reordering functionality on a table.

But even when I explicitly add the reference to the latest JQuery UI file on the view model where it's required, e.g.

<script src="/Scripts/jquery-ui-1.10.2.min.js" type="text/javascript"></script>

the sortable() method doesn't work. It doesn't show up in the Visual Studio intellisense, and it doesn't work when run. On running on Internet Explorer (or any browser), I simply get an error that says, "Object doesn't support property or method 'sortable'".

Here is how I'm attempting to use the method:

        <script type="text/javascript">
        $(document).ready(function()
        {
            $("#clueTable tbody").sortable();
        });
        </script>

I notice from the Intellisense there is a property 'sortables' and 'sort' that it finds from the JQuery UI file, but not 'sortable'.

So the reference seems fine, and it's definitely the latest JQuery UI code (I verified this by getting the latest file) so I'm a bit mystified with this one.

I would use Fiddler or the IE dev tools network panel to verify for sure that the jquery ui script file is loaded. Don't rely on the VS intellisense. Here is a jsfiddle with your exact code which works fine. jsfiddle.net/vR9UW/5 (using jquery ui 1.10.2). There must be something else going on. — BNL
– BNL, Commented Apr 24, 2013 at 12:39
Thanks @BNL, I sort of forgot the developer tools existed! Chrome's developer tools seemed to provide a lot more detail than Internet Explorer's so I used that to figure out exactly what was happening. — Ciaran Gallagher
– Ciaran Gallagher, Commented Apr 24, 2013 at 14:59

Ciaran Gallagher · Accepted Answer · 2013-04-24 14:57:57Z

In the _Layout.cshtml, it looks like at some point I manually referenced the JQuery and JQuery UI scripts, forgetting that the scripts were already rendered in bundles, e.g.

@Scripts.Render("~/bundles/jquery")

I was correctly referencing the right scripts but because they were being loaded again, I think they were destroying the first instances of the files, including the JQuery UI code, which relies on the JQuery file being loaded.

What I didn't understand also was that by default, ASP.NET MVC 4 applications do not render the JQuery UI framework, even though the files exist in the project and a script bundle is created in the BundleConfig.cs file.

Therefore, to fix my problems, I removed all the manual references so that only the bundles were being rendered, and added the following line to render the JQuery UI code in the head of my _Layout.cshtml file:

@Scripts.Render("~/bundles/jqueryui");

The way the bundles appear to work is that the Global.asax file invokes the 'RegisterBundles' method of the BundleConfig.cs, which creates new script bundles by searching for the relevant JavaScript files in the 'Scripts' folder and wherever else you tell it to look.

Then, to load the script files from the HTML, you have to render them using @Script.Render(), and providing the name of the script bundle as a parameter (e.g. "~/bundles/jqueryui").

To render all the scripts on every page of the website, you can add this to the _Layout.cshtml file, which is applied to every page.

Collectives™ on Stack Overflow

JQuery UI sortable() method not supported error

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related