jQuery Ajax(beforeSendとcomplete)はFireFoxでは正常に動作しますが、IE8やChromeでは正常に動作しませんajax


Answers

注記:async = falseはjQuery 1.5以降で非推奨です

代わりにcomplete()コールバックを使用する必要があります。

Question

私はMVCアプリケーションでjQuery ajaxバージョン1.4.1を使用しています(ただし、私が議論している問題は以前のjQueryバージョン3.2.1と同じでした)。ユーザー名がすでに登録されている場合は、顧客登録時に確認してください。 ユーザーが「可用性の確認」ボタンをクリックすると、サーバー上の可用性をチェックしてメッセージを表示しながら、チェックボタンの代わりにビジーなイメージを表示しています(実際にはチェックボタンを隠してイメージを表示しています)。 これは同期呼び出し(async:false)で、beforeSend:およびcomplete:を使用してビジー画像とチェックボタンを表示したり非表示にしたりしました。 この問題はFirefoxではうまくいきましたが、IE 8とChromeでは、ビジー状態の画像も表示されず、チェックボタンも表示されませんでした。 使用可能なメッセージと使用できないメッセージは正しく表示されます。 以下はコードです:

ユーザーコントロール(ascx)のHTML:

<div id="available">This Username is Available</div>

div id="not_available">This Username is not available</div>

<input id="txtUsername" name="txtUsername" type="text" size="50" />&nbsp;

<button id="check" name="check" type="button">Check Availability</button>

<img id="busy" src="/Content/Images/busy.gif" />

このユーザーコントロールの上に、私は次のコードを持つ外部のjavascriptファイルをリンクしています:

$(document).ready(function() {

    $('img#busy').hide();
    $('div#available').hide();
    $('div#not_available').hide();

    $("button#check").click(function() {
        var available = checkUsername($("input#txtUsername").val());

        if (available == "1") {
            $("div#available").show();
            $("div#not_available").hide();
        }
        else {
            $("div#available").hide();
            $("div#not_available").show();
        }
    });
});


function checkUsername(username) {

    $.ajax({

        type: "POST",

        url: "/SomeController/SomeAction",

        data: { "id": username },

        timeout: 3000,

        async: false,

        beforeSend: function() {

            $("button#check").hide();

            $("img#busy").show();

        },

        complete: function() {

            $("button#check").show();

            $("img#busy").hide();

        },        

        cache: false,

        success: function(result) {

             return result;

        },

        error: function(error) {

            $("img#busy").hide();

            $("button#check").show();

            alert("Some problems have occured. Please try again later: " + error);

        }

    });

}