Question

I’m working in a ASP.NET MVC 3 application, and I’m trying to use jQuery’s Sortable. I already have a jQuery DatePicker working. In my View I have the following code:

<link href=@Url.Content("~/Content/jquery_css/jquery.ui.all.css") rel="stylesheet" type="text/css" />
<script src=@Url.Content("~/Scripts/jquery.ui.core.js") type="text/javascript"></script>

<script src=@Url.Content("~/Scripts/jquery.ui.datepicker.js") type="text/javascript"></script>

<script src=@Url.Content("~/Scripts/jquery.ui.widget.js") type="text/javascript"></script>
<script src=@Url.Content("~/Scripts/jquery.ui.mouse.js") type="text/javascript"></script>
<script src=@Url.Content("~/Scripts/jquery.ui.sortable.js") type="text/javascript"></script>

Here is the initializer code:

<script type="text/javascript">
    $(document).ready(function () {
        $("#DateBegin").datepicker({ dateFormat: "dd/mm/yy" }).val();
        $("#DateEnd").datepicker({ dateFormat: "dd/mm/yy" }).val();
        $("#MenuPages").sortable("enable");
    }); 
</script>

The DatePicker work seamlessly. Here is the code:

<fieldset>
    <legend>Search history</legend>
        <p>
            Begin: <br />
            <input type="text" id="DateBegin" name="DateBegin" value="" />
            <br />
            End: <br />
            <input type="text" id="DataEnd" name="DataEnd" value=""/>
            <br />
        </p>
    <button>Search</button>
</fieldset> 

But the Sortable does not work. The code:

<ul name="MenuPages" id="MenuPages">
    <li id="page_1">Home</li>
    <li id="page_2">Blog</li>
    <li id="page_3">About</li>
    <li id="page_4">Contact</li>
</ul>

I downloaded the DatePicker about a month ago, and downloaded the Sortable now. I put the jquery.ui.mouse.js, jquery.ui.widget.js and jquery.ui.sortable.js in the session. I also replaced jquery.ui.core.js.

I don’t know if it was necessary, I also copied jquery-ui-1.8.19.custom.js to the session (there’s also jquery-ui-1.8.11.js and jquery-ui-1.8.11.min.js there).

Don’t know where the source of the error could be.

Answer 1

Instead of

$("#MenuPages").sortable("enable");

try

$("#MenuPages").sortable();

to initialize the sortable.