0

jquery確認ダイアログがあります。ユーザーが[OK]を押すと、数秒かかるAjax呼び出しを実行します。この遅延の間、ダイアログにgifアニメーションを表示して、ユーザーがデータを処理していることを認識できるようにします。ただし、ダイアログにgifを表示させることができないようです。

htmlは：

<div id="dlgReleaseConfirmation" title="ConfirmRelease" style="display : none"  >
    <div id="release-in-progress" style="display:none">
            <img src="images/ajax-loader.gif" ></img>
    </div>
</div>

jsファイルのコードは次のとおりです。

       $("#dlgReleaseConfirmation").dialog({
        modal: true,
        buttons: {
            "Release": function () {
                $("#release-in-progress").show();       // show the busy div - not working, blocked by dialog?
                Release();   // release assays
                loadTable();           // refresh datatable
                $("#release-in-progress").hide();       // hide the busy div
                $(this).dialog("close");    // close this dialog
            },
            Cancel: function () {
                $(this).dialog("close");
            }
        }

誰かが私が間違っていることを見ることができますか？

ソリューションで更新します。

アレクサンダーは私を正しい道に送ってくれました。肝心なのは、Ajax呼び出しを非同期にして、ダイアログが更新されてビジーインジケーターが表示されるようにする必要があるということです。ただし、これを行うだけでは、ajax呼び出しが非同期で進行している間、コードが続行されて画面が閉じて、ユーザーにフィードバックが提供されないという問題が発生します。

これを修正するために、ajaxStart（）とajaxStop（）の呼び出しを追加して、非同期Ajaxが進行中の呼び出し中にビジーインジケーターを表示および非表示にしました。動作するリリースボタンハンドラコードは次のとおりです。

"Release": function () {
    $(this).ajaxStart(function () {
        $("#release-in-progress").show();   
    });
    $(this).ajaxStop(function () {
        $("#release-in-progress").hide();
        $(this).dialog("close");    // close this dialog
    });
    Release();   // release assays
    loadTable();           // refresh datatable
 };
4

1 に答える 1

1

関数で同期AJAX呼び出し（async: false）をloadTable()実行すると、リクエストが完了して画像リソースが読み込まれなくなるまで実行がフリーズします。目的を達成するには、非同期呼び出しを使用する必要があります。

于 2012-12-10T18:23:49.463 に答える