1

我正在学习 javascript 揭示原型模式。我有两个脚本 1 定义一个对话框和另一个使用它。除了这个 javascript 抛出 $(dialogDiv) 没有在 Firefox 中定义之外，一切似乎都正常工作？但是，该脚本在 IE 和 Chrome 中运行良好。

揭示原型：

var Sandbox = Sandbox || { };
Sandbox.UI = Sandbox.UI || { };

Sandbox.UI.AjaxContentModalDialog = function(elementId, dialogOptions) {
    this.dialogDiv = elementId;
    this.options = dialogOptions;    
};

Sandbox.UI.AjaxContentModalDialog.prototype = function () {

    var open = function (methodName, url) {
        $(dialogDiv).css("overflow", "hidden");
        $(dialogDiv).dialog({
            width: this.options.width,
            height: this.options.height,
            autoOpen: false,
            resizable: false,
            modal: true,
            title: this.options.title,

            buttons: {
                Save: function () {
                    var form = $(options.formToPost);
                    $.ajax({
                        type: "POST",
                        url: form.attr('action'),
                        data: form.serialize(),
                        success: function (data, status, xhr) {
                            if (data.IsValid) {
                                $(dialogDiv).dialog('close');
                                $(dialogDiv).empty();
                                $(options.divToUpdate).empty();
                                $(options.divToUpdate).html(data.View);
                            } else {
                                $("#errorDiv").html(data.Message + "<br/>");
                            }
                        }
                    });
                },

                Cancel: function () {
                    $(dialogDiv).dialog('close');
                    $(dialogDiv).empty();
                }
            }
        });
        $.ajax(
            {
                Type: methodName,
                url: url,
                success: function (data, status, xhr) {
                    openDialog(data);
                }
            });

        function openDialog(data) {
            $(dialogDiv).html(data);
            $(dialogDiv).dialog('open');
        }
    };

    return {
        open: open
    };

} ();

消费者：

"use strict";

var options = { title: 'Edit User Profile Setting Value',
    height: 180,
    width: 375,
    formToPost: '#userProfileSettingForm',
    divToUpdate: '#userProfileDetail',    
    buttons: [{ text: "Ok" }, { text: "Cancel"}]
};

var dialog;
dialog = new Sandbox.UI.AjaxContentModalDialog('#dialogDiv', options);

$(document).ready(function () {    
    disableInheritLinks();
    $('.Sandbox-udsActionLink').live("click", function (e) {

        e.preventDefault();
        dialog.open('get', this.href);
        return false;
    });


    function disableInheritLinks() {
        $('.Sandbox-disabled').each(function (item) {
            this.href = '';
        });


        $('.Sandbox-disabled').live("click", function (e) {
            e.preventDefault();
            this.href = '';
            console.log("disalbed: " + this.href);
            return false;
        });
    }
});
4

3 回答 3

1

我想你的意思是$(this.dialogDiv)。此外，它在不同浏览器中的行为不同这一事实可能意味着您在this上下文中存在不一致。

于 2013-02-18T00:53:58.570 回答
1

由于您有一个带有 id 的元素，IE（和 Chrome 以尝试与 IE 兼容）window为每个 id 创建属性：

window.dialogDiv //points to the element with id=dialogDiv

Firefox 不这样做，这就是它在该浏览器中失败的原因。无论如何，您都应该使用this.dialogDiv它，因为它适合您的模型。此外，window.elementId 属性是非标准的，不应依赖。

于 2013-02-18T00:55:19.760 回答
0

它必须是$(this.dialogDiv)。没有this，它的世界指的是一个局部变量，而不是一个对象属性。不确定哦，它是否可以在其他浏览器中运行，但......

于 2013-02-18T00:53:41.633 回答