1

プロトタイプパターンを明らかにするjavascriptを学んでいます。ダイアログを定義するスクリプトと、ダイアログを使用するスクリプトの 2 つがあります。この 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 (および IE と互換性を持たせるために Chrome) は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 に答える