0

このコードは、php コードを使用して動的に生成されます:-

<div class="mailList" id="M_6">
    <div class="mailListHeader" id="H_6">
        <img style="float:right; display:none;" class="loaderIMG" id="LOADER_6" src="images/preloader.gif">
        Sent by <strong>Admin</strong> on <strong>Oct 03 2013 02:53 PM</strong> to <strong>Received Response</strong> for Quarter <strong>3</strong> Year <strong>2013</strong>.<br>
        Subject: <strong>Test Mail</strong><br>
    </div>

    <div class="mailListContent" id="C_6">
        <div class="closeContent" id="CC_6">Close [x]</div>
        <span id="SPAN_6"></span>
    </div>

    <div class="mailListFooter" id="F_6">
        <span class="mailContentBtn" id="MCBTN_6" style="font-size:11px; color:#09C; cursor:pointer;">
            View Content
        </span>
        <span class="mailListBtn" id="MLBTN_6" style="float:right; font-size:11px; color:#C06; cursor:pointer;">
            Successfull-[0] Failed-[4]
        </span>
    </div>
</div>

次に、ユーザーはView ContentまたはSuccessfull-[0] Failed-[4]をクリックして、結果を div mailListContent に表示するよりも ajax 要求を行うことができます。以下は、jquery ajax リクエストのコードです。

$(".mailContentBtn, .mailListBtn").click(function(){
    var currentId = $(this).attr('id');
    currentId = currentId.split("_");
    var actualId = currentId[1];

    if($("#C_"+actualId).is(":visible")) {
        $("#C_"+actualId).hide("slow","swing");
    }
    $("img#LOADER_"+actualId).show();

    if(currentId[0]=="MCBTN") {
        var dataString ="action=getMailContentByID&mailID="+actualId;  
    } else {
        var dataString ="action=getMailListByID&mailID="+actualId;
    }

    $.ajax({
        type: "POST",
        url: "include/getMail.php",
        data: dataString,
        cache: false,
        async: false,
        success: function(html) { 
            $("#SPAN_"+actualId).empty();
            $("#SPAN_"+actualId).append(html);

            $("#C_"+actualId).show("slow","swing");
            $("img#LOADER_"+actualId).hide();
        } 
    });
});

リクエストとイベントは正常に機能します。問題は、ユーザーが [コンテンツの表示]または[成功-[0] 失敗-[4]]をクリックするたびに、読み込み中の画像が表示されないことです。ご覧のとおり、読み込み中の画像が 1 つだけクリックに表示されるのではなく、すべての読み込み中の画像に一意の ID を与えます。Google Chrome のインスペクト コードにエラーはありません。どうすればこれを解決できますか?

ありがとうございました。

4

2 に答える 2

3

$.ajax への呼び出しで、「async」オプションを「true」に変更します。あなたの場合、 $.ajax は、同期的に実行されるため、読み込み中の画像を表示する際に ui スレッドをブロックしているためです。

于 2013-10-24T05:20:32.323 に答える
0

見逃した: 

$(document).ready(function () {
});

これを試して：

<script>
        $(document).ready(function () {
            $(".mailContentBtn, .mailListBtn").click(function () {
                var currentId = $(this).attr('id');
                currentId = currentId.split("_");
                var actualId = currentId[1];

                if ($("#C_" + actualId).is(":visible"))
                    $("#C_" + actualId).hide("slow", "swing");

                $("img#LOADER_" + actualId).show();

                if (currentId[0] == "MCBTN") {
                    var dataString = "action=getMailContentByID" +
                            "&mailID=" + actualId;
                }
                else {
                    var dataString = "action=getMailListByID" +
                            "&mailID=" + actualId;
                }

                $.ajax({
                    type: "POST",
                    url: "include/getMail.php",
                    data: dataString,
                    cache: false,
                    async: false,
                    success: function (html) {
                        $("#SPAN_" + actualId).empty();
                        $("#SPAN_" + actualId).append(html);

                        $("#C_" + actualId).show("slow", "swing");
                        $("img#LOADER_" + actualId).hide();
                    }
                });
            });
        })


    </script>
于 2013-10-24T05:22:42.517 に答える