2

1 つの jQuery ダイアログを作成しました。以下は、私が作成した Ajax 関数です。

$.ajax({
    url: "/StaffManageCertifications/GetExamCodesAndCategory/",
    type: "Post",
    datatype: "html",
    success: function (data) {
        debugger;
        $('#divExamCodesCategory').html(data);
        $("#divExamCodesCategory").dialog({
            autoOpen: false,
            width: 700,
            height: 610,
            modal: true,
            resizable: false,
            draggable: true,
            title: 'Add Exam Code/Category'
        });
        $("#divExamCodesCategory").dialog("open");
        $('a.ui-dialog-titlebar-close').remove();
        $('#divProcessImage').css({
            "display": "none"
        });
    },
    error: function (req, status, error) {
        ErrorMessageStaff(req.responseText);
        $('#screen').css({
            "display": "block",
            "width": "",
            "height": ""
        });
        $('#divProcessImage').css({
            "display": "none"
        });
    }
});

今、その div = divExamCodesCategory に 2 つのボタン (OK とキャンセル) を配置しました。

このダイアログを閉じるたびに破棄するコード行の下に記述されています。

$("#divExamCodesCategory").dialog("destroy");

今、2回目に開いたときに、最初のクリックでダイアログが表示されません。2 回目のクリック - ダイアログは表示されますが、データは表示されません。空のダイアログ。

また、画面中央に来ていません。画面の一番下まで落ちます。以下は、このダイアログの位置スタイルです。

.ui-dialog {
    padding: 0em !important;
    position: fixed !important;
}

これに関する任意のヘルプをいただければ幸いです。

ありがとう。

4

4 に答える 4

5

ダイアログを閉じるたびに破棄する場合は、ダイアログのクローズ ハンドラで行う必要があります。

$(...).dialog({
    ...,
    close: function() {
        $(this).dialog('destroy');
    }
});

現状では、(表示されていない)destroy呼び出しが、説明したようにこの AJAX 呼び出しの直後にある場合、AJAX 呼び出しは非同期であり、すぐに終了するため、実際にはすぐに発生します。

ps を使用する代わりに、使用$.css({'display': 'none'})するだけです.hide()

于 2013-07-12T07:12:23.117 に答える
0

初め。このコードを ajax 呼び出しの外に移動する必要があります。

$("#divExamCodesCategory").dialog({ autoOpen: false,
    width: 700,
    height: 610,
    modal: true,
    resizable: false,
    draggable: true,
    title: 'Add Exam Code/Category'

});

代わりにこれを入れてください。

$(document).ready(function() {
    $("#divExamCodesCategory").dialog({ autoOpen: false,
        width: 700,
        height: 610,
        modal: true,
        resizable: false,
        draggable: true,
        title: 'Add Exam Code/Category'
    });
});

成功の呼び出しを次のように変更します。

success: function (data) {
    debugger;
    $('#divExamCodesCategory').html(data);
    $("#divExamCodesCategory").dialog("open");
    $('a.ui-dialog-titlebar-close').remove();
    $('#divProcessImage').css({ "display": "none" });
},

そして締めたい時。オブジェクトを破壊しないでください。閉じるだけ

$("#divExamCodesCategory").dialog("close");

css の場合。ダイアログの位置を固定しないでください。デフォルトでは中央の画面にあります。高さと幅を調整したいかもしれませんが、位置はそのままにしておきます。

于 2013-07-12T07:10:14.560 に答える
0

(1 つのダイアログを作成して再利用する) は良いアプローチであり、その逆も同様です。//毎回新しいダイアログを作成しています。すでに作成されているかどうかを確認し、作成されていない場合は、作成して開き、以前に作成したダイアログを開きます

 if (!$("#divExamCodesCategory").hasClass('ui-dialog')) { //check if alredy created
// it is not initialized yet
        $("#divExamCodesCategory").dialog({ autoOpen: false,
                width: 700,
                height: 610,
                modal: true,
                resizable: false,
                draggable: true,
                title: 'Add Exam Code/Category'

            });
        //initialized
    }
//open dialog
    $("#divExamCodesCategory").dialog("open");// after creation
于 2013-07-12T07:05:06.397 に答える