jQueryUI Modal open event & MVC.NET causing error ".dialog is not a function"

I hope someone can help as I'm at my wits end with this. What I'm trying to do is this.

1. "Draggable" Item is Dropped into a "Droppable" area (this works)
2. This posts the id of the item to my controller which returns the type of item it is (this works)
3. I pass the returned item name to a function which opens a modal and renders a partial view in the modal depending on the particular item.

The last bit is where the issue is. All the steps above work fine, the modal is popped and the partial view is rendered to the modal. But the button to close the dialog throws the error ".dialog is not a function" and after closing the modal using the 'x' in the corner subsequent attempts to open the modal will not work throwing a similar error.

Here's the example I'm working with to try get this working.

$(function () {
        $('.draggable').draggable({ containment: '#imageboundry', revert: 'valid' });
        $('#droppable').droppable({
            drop: function (event, ui) {
                $.ajax({
                    type: "POST",
                    url: '/Home/AddToCart/' + $(ui.draggable).attr("id"),
                    success: function (data) {
                        getItemType(data);
                    }
                });
            }
        });
    });

    function getItemType(itemName) {
        $('#dialogs').dialog({
            open: function () {
                $(this).load("AdditionalContent", { itemName: itemName }, function () {
                    alert("This happened");
                });
            },
            modal: true,
            resizable: false,
            title: itemName,
            width: 400,
            autoOpen: false,
            buttons: {
                "Confirm": function () {
                    $(this).dialog('close');
      开发者_运维问答          }
            }
        });
    }

This is my controller which returns the partial view to the modal

public PartialViewResult AdditionalContent(string itemName)
    {

        return PartialView("_" + itemName + "Attributes");
    }

The close button works once I take out the open: function () { ... } bit and I can reopen the modal again and again but once I put this back in the error gets thrown. This is obviously the cause but cannot for the life of me figure out why.

Thanks in advance for your help and sorry for the very long post.

UPDATE:

I've attempted initializing the modal in document.ready and call it from my "drop" function in the first main function. From doing this I've narrowed it down to this line of code which loads the partial view from my controller. Without this line the functionality works. Any ideas on what is wrong with this.

$(this).load("AdditionalContent", { itemName: itemName }

---

I figured it out. Included in the partial views was a second call to the jQuery library which was added automatically when the view was created. Plus it was version 1.4.4 while I was using 1.5.1 straight from Google in the _Layout page. The second jQuery library was obviously breaking the functionality as there was a conflict between the two versions. It wasn't until I watched the FireBug console that I noticed the second loading of the 1.4.4 library.

Thanks to all for your help, feel like a bit of an idiot but lesson learned..... for now

---

could try this but i am not sure

$('#dialogs').dialog({
     var self = this;
            open: function () {
                $(self).load("AdditionalContent", { itemName: itemName }, function () {
                    alert("This happened");
                });
            },