Question

I have a partial view that has a number of Div’s, each are set to be draggable using the JQuery UI draggable library.

The Jquery scripts are loaded in the master page, and when you open the partialview on it’s own, it works ok. However, I load this partialview in the main page using ajax, triggered by selecting an option in a drop down list. When I do this, the jquery code no longer works, and I get this error:

Uncaught TypeError: Object #<an Object> has no method 'draggable'

It seems that the partialview does not have access to the jquery library, but I don’t know why.

The code I am using the set the Div’s up as draggable is below:

 $(function () {
        $(".NameBox").draggable({
            revert: true,

            start: function (event, ui) {

                document.onselectstart = function () { return false; };

            },
            stop: function (event, ui) {
                document.onselectstart = function () { return true; }
            }

        });
        $(".NameBox").live(droppable({
            accept: '.NameBox',
            drop: function (event, ui) {
              alert(ui.draggable.attr("dropped"))


        });
});

The partial view is loaded using a Jquery load statement:

$('#relationships').load('<%= Url.Action("ListRelationshipMappings", "Admin") %>/' + $("#availibleInstances").val())

availibleInstances is just a dropdownlist that allows the selection of an ID field.

Answer 1

Turns out, this was because I was also using the Telerik MVC script register option to load it’s scripts, which loaded it’s own version of Jquery, which was causing a conflict.

This can be resolved by using the following to load the Telerik scripts without Jquery:

<% Html.Telerik().ScriptRegistrar().jQuery(false); %>