Uncaught TypeError: Object [object Object] has no method 'dialog'

Question

I am trying to use the jQueryUI dialog in an MVC3 application but having an issue with it. The dialog I have is loading a partial view into it where the user will either edit or create a new item. This works fine but if I try to save or update the item, or if I try to close it I get the message in the title.

I have added all of the required .js files but still getting the error. I have also used firebug but still can't find why error is happening.

HTML

<span class="EditLink ButtonLink" addressId="@addr.Id">Modify this Address</span> <div id="popup"></div> 

JavaScript

$(document).ready(function () {     var id = 0;      //define config object     var dialogOpts = {         title: "Edit item",         modal: true,         autoOpen: false,         height: 500,         width: 500,         open: function () {             $("#popup").load("/partialviewtoload/" + id);         },         buttons: {             Cancel: function() {                 $(this).dialog('close');             }         }     };      $("#popup").dialog(dialogOpts);    //end dialog      $('.EditLink').click(function() {         id = $(this).attr("itemId");         $("#popup").dialog("open");         return false;     });     }); 

Answer 1

issue was that I was referencing "jquery-1.5.1.min.js" twice. Once in the _Layout.cshtml and also in the partial view I was loading. . Removed the reference in the partial view and got it sorted.

Answer 2

It seems that browser have not loaded jQueryUI, ensure that it is in your DOM