jQueryUI模态打开事件& MVC.NET导致错误“.dialog不是函数”

时间:2011-03-04 22:20:22

标签: asp.net-mvc jquery-ui dialog

我希望有人可以提供帮助,因为我的智慧结束了。我想要做的就是这个。

  1. “可拖动”项目被放入“可放置”区域(这可行)
  2. 这会将项目的ID发布到我的控制器,该控制器返回它的项目类型(这可行)
  3. 我将返回的项目名称传递给一个函数,该函数打开一个模态并根据特定项目在模态中呈现局部视图。
  4. 最后一点是问题所在。上面的所有步骤都可以正常工作,弹出模态并将局部视图渲染到模态。但是关闭对话框的按钮会抛出错误“.dialog不是函数”,并且在使用角落中的“x”关闭模态后,打开模态的后续尝试将无法发挥类似错误。

    以下是我正在努力尝试实现此功能的示例。

    $(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');
                    }
                }
            });
        }
    

    这是我的控制器,它将局部视图返回到模态

    public PartialViewResult AdditionalContent(string itemName)
        {
    
            return PartialView("_" + itemName + "Attributes");
        }
    

    关闭按钮一旦我取出open: function () { ... }位就可以工作了,我可以一次又一次地重新打开模态但是一旦我把它放回错误中就会被抛出。这显然是原因,但不能为我的生活找出原因。

    提前感谢您的帮助,并对很长的帖子感到抱歉。

    更新:

    我尝试在document.ready中初始化模态,并在第一个main函数中从我的“drop”函数调用它。从这一点开始,我把它缩小到这行代码,从我的控制器加载局部视图。没有这一行,功能就有效。关于这个问题的任何想法。

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

2 个答案:

答案 0 :(得分:1)

我明白了。部分视图中包含对jQuery库的第二次调用,该库在创建视图时自动添加。此外,它是版本1.4.4,而我在_Layout页面中直接使用了1.5.1。第二个jQuery库明显打破了功能,因为两个版本之间存在冲突。直到我看到FireBug控制台,我注意到第二次加载1.4.4库。

感谢所有人的帮助,感觉有点白痴但是从中吸取了教训......现在

答案 1 :(得分:-2)

可以尝试这个,但我不确定

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