3

javascript呼び出しを介してボタンがクリックされたときに、内部にgifアニメーションを含むdivを表示しようとしています。しかし問題は、Firefoxでのみ正常に機能していることです。IEとChromeでは、アニメーションは表示されません。alert（ "stop"）;でデバッグしてみました。アニメーションの前後で実際に機能していますが、アラートを削除すると、機能しなくなります。何か提案はありますか？

TestPage.aspxのスニペットは次のとおりです。

<div id="animationDiv" style="display: none;">
    <img src="loading.gif" />
</div>
...
<div>
    <asp:Button ID="testButton" runat="server" Text="Test AJAX" OnClientClick="return testButtonClick();" />
</div>
...
<script type="text/javascript">
<!--
    var docWidth, docHeight;

    function testButtonClick() {
        var o_animationDiv = $("#animationDiv");

        o_animationDiv.width(docWidth);
        o_animationDiv.height(docHeight);
        o_animationDiv.show();

        $.ajax({
            type: "Post",
            url: "TestPage.aspx/TestAjax",
            async: false,
            cache: false,
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: testAjaxSuccess,
            error: testAjaxError
        });

        function testAjaxSuccess(data, status, xhr) {
            // do something here
        };

        function testAjaxError(xhr, status, error) {
            // do something here
        };

        o_animationDiv.hide();

        return false;
    };

    $(document).ready(function () {
        docWidth = $(document).width();
        docHeight = $(document).height();
    });
//-->
</script>

TestPage.aspx.csのスニペットは次のとおりです。

// using PageMethod for ajax
[System.Web.Services.WebMethod(EnableSession = true)]
public static string TestAjax()
{
    System.Threading.Thread.Sleep(5000); // 5 seconds

    // or do something else here
    // ie. if validation error, throw an exception

    return string.Empty;
}

更新1：いくつかのjavascript関数を追加しました

4

2 に答える 2

0

.hide()投稿の成功について電話してみませんか：

$.ajax({
  type  : "Post",
  url   : "TestPage.aspx/TestAjax",
  cache : false,
  data  : "{}",
  contentType: "application/json; charset=utf-8",
  dataType: "json",
  success: function(data) {

    // hide element when POST return as arrived,
    // meaning the "5 seconds" period has ended!
    o_animationDiv.hide();

  }
});

コールバック関数については、jQueryのドキュメントで読むことができます！

于 2012-06-13T11:22:50.243 に答える
0

jQuery ajaxは非同期であるため、ajaxの結果が再び非表示になるのを待つことはありません。

 o_animationDiv.hide();
 o_animationDiv.show();

この行はシリアルで機能し、正しく機能しているかどうかを確認できません。したがって、ajaxの結果が非表示になるのを待つ必要があります。これを試してください。

  $.ajax({
            type: "Post",
            url: "TestPage.aspx/TestAjax",
            async: false,
            cache: false,
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json"
        }).done(function() {
            o_animationDiv.hide();
        });

アップデート：

申し訳ありませんが、同期ajaxリクエストを作成するという点を見逃しました。しかし、すでに問題があります。同期XHRを実行すると、ほとんどのブラウザーはそれ自体をロックします。これは、以前のプロセスにも影響する場合があります。

を使用すればbeforeSend、この問題を回避できるかもしれません。

beforeSend

 A pre-request callback function that can be used to modify the jqXHR 
(in jQuery 1.4.x, XMLHTTPRequest) object before it is sent

これを試してみてください

$.ajax({
            type: "Post",
            url: "TestPage.aspx/TestAjax",
            async: false,
            cache: false,
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            beforeSend : function() {
               o_animationDiv.show();
            }
        }).done(function() {
            o_animationDiv.hide();
        });

更新-2：

それでもうまくいかない場合は、これを試してください。

...
o_animationDiv.width(docWidth);
o_animationDiv.height(docHeight);
o_animationDiv.show();

setTimeout(function() {
        $.ajax({
            type: "Post",
            url: "TestPage.aspx/TestAjax",
            async: false,
            cache: false,
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: testAjaxSuccess,
            error: testAjaxError
        }).done(function() {
            o_animationDiv.hide();
        });
}, 600);
于 2012-06-13T11:21:40.117 に答える