1

Add と Cancel の 2 つのボタンがある Jquery ダイアログがあります。ユーザーはいくつかのフィールドに入力し、[追加] ボタンを押すと、UI の変更と検証を行います。すべての操作が完了したら、ダイアログを閉じます。しかし、問題は、保存やその他の操作の後にダイアログを閉じているにもかかわらず、操作が完了する前にダイアログが閉じられていることです。

以下は私のJqueryダイアログコードです。

    dlg.dialog({
        height:300,
        width:600,
        modal:true,
        autoOpen:true,
        title: "Add Property",
        closeOnEscape:true,
        buttons: {
            "Cancel": function() {
                $(this).dialog("close");
            },
            "Create Property": function() {
                    //Validate Property 
                    // Save Property 
                    $(this).dialog("close");
                }
            }
        }
     }); 

    function save() {
       $.ajax({
        type: 'POST',
        url: ServiceUrl,
        data: parameter,
        success : function(data) {

            // Convert the response text to JSON format
            var jsonData = eval('(' + data + ')');

            if (jsonData.results) {
                   // success
            } 
         }
      });
    };

上記のコードでは、 $(this).dialog("close"); を実行しています。関数を検証して保存した後、これらの関数が終了する前にダイアログが閉じられます。firebug でブレークポイントを保持して行ごとに実行すると、この動作は発生しません。解決を助け、理解を助けてください。前もって感謝します。

4

3 に答える 3

1

.ajax()呼び出しは非同期であるため$(this).dialog("close");、 は呼び出しが終了するまで待機しません.ajax()。保存/検証が成功したことを確認したらdlg.dialog("close");、呼び出しの成功を内側に入れます。.ajax()

dlg.dialog({
    height:300,
    width:600,
    modal:true,
    autoOpen:true,
    title: "Add Property",
    closeOnEscape:true,
    buttons: {
        "Cancel": function() {
            $(this).dialog("close");
        },
        "Create Property": function() {
                //Validate Property 
                // Save Property 
                $.ajax({
                    success: function (response) {
                       //test to see if the response is successful...then
                       dlg.dialog("close");
                    },
                    error: function (xhr, status, error) {
                       //code for error condition - not sure if $(this).dialog("close"); would be here.
                    }
                })
            }
        }
    }
 });
于 2012-11-05T19:48:33.203 に答える
0

ロジックは次のようになります。

dlg.dialog({
    height:300,
    width:600,
    modal:true,
    autoOpen:true,
    title: "Add Property",
    closeOnEscape:true,
    buttons: {
        "Cancel": function() {
            $(this).dialog("close");
        },
        "Create Property": function() {
                $.ajax({//Validate request
                    ...
                    success:function(response){
                        $.ajax({//Save request
                            ...
                            success:function(response){
                                //close the dialog here
                            }
                        });
                    }
                });
            }
        }
    }
 });

このように ajax 呼び出しを連鎖させるか、オプションを渡して非同期にすることができasync:falseます。

于 2012-11-05T19:50:01.453 に答える
0

同じスクリプトを何度も書く必要がなくなるので、グローバルな「保存」機能の必要性を理解しています。

次のようにしてみてください。

dlg.dialog({
    height: 300,
    width: 600,
    modal: true,
    autoOpen: true,
    title: "Add Property",
    closeOnEscape: true,
    buttons: {
        "Cancel": function () {
            $(this).dialog("close");
        },
        "Create Property": function () {

            save(true); //!!!

        }
    }
});

その後：

function save() {
    $.ajax({
        type: 'POST',
        url: ServiceUrl,
        data: parameter,
        success: function (data) {
            // Convert the response text to JSON format
            var jsonData = eval('(' + data + ')');
            if (jsonData.results) {

                //!!!! Then close the dialog
                dlg.dialog("close") //!!!!

            }
        }
    });
}

このようにして、AJAX 応答が受信されるまで close 関数は呼び出されません。

編集:dlg変数と関数名も、次のようsave()にオブジェクトにアタッチしてグローバルとして設定します。window

window.dlg = $("#myDialogElement");
window.save = function () {
    //function stuff here 
}

これにより、常に利用できるようになります。

于 2012-11-05T19:59:27.637 に答える