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.

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.

• javascript
• jquery
• asp-mvc

• Not really sure what the down vote was for, if there is something unclear, let me know – Sam Cogan Commented Nov 21, 2010 at 19:52
• 5 I downvoted for the "not working" and vague question title. Javascript must be at least working if you get that error and "not working" is the term my grandmother uses for the blue screen of death. ;) Try: "Uncaught TypeError: Object #<an Object> has no method 'draggable' Error when using PartialView" – John Farrell Commented Nov 21, 2010 at 19:56
• @jfar, "not working" is the term my grandmother uses for the blue screen of death, looooooooooooooooooooooooooool, I spilled my beer on the screen from laughing. Bookmarking this for further reference :-) – Darin Dimitrov Commented Nov 21, 2010 at 19:59
• @Sam Cogan, where is this javascript that you've shown located? In the partial or in the main view? How are you loading the partial with AJAX? Could you share that part of your code? – Darin Dimitrov Commented Nov 21, 2010 at 20:05
• @darin it is in the partial view. – Sam Cogan Commented Nov 21, 2010 at 20:06

4 Answers 4

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); %>

This error usually happens because you didn't reference the UI javascript library properly.

<!--<script type="text/javascript" src="//ajax.googleapis./ajax/libs/jquery/1.10.1/jquery.min.js"></script>-->
<script type="text/javascript" src="//ajax.googleapis./ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis./ajax/libs/jquery/1.10.1/jquery.min.js"></script>

if for example you have your UI listed before your library... like shown above you will get this error. If instead you do it like listed below:

<script type="text/javascript" src="//ajax.googleapis./ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis./ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<!--<script type="text/javascript" src="//ajax.googleapis./ajax/libs/jquery/1.10.1/jquery.min.js"></script>-->

You will not.

Happy codin' ;D

and just so that there is no confusion from newer people, anything between isn't necessary... just using the mented out piece for demonstration.

I had the same problem and I realized I had the following scripts loaded in the master page and in the partial view I was loading using Ajax...

Make sure you don't load scripts twice...