Ajax加载指示器仅在第一次工作,然后该指示器不出现

时间:2019-07-03 05:42:35

标签: jquery ajax asp.net-mvc

我有以下代码,除了加载指示器仅在我第一次单击搜索按钮时才起作用之外,其他一切正常,但是在第一个事件发生后,它再也不会出现了,我无法弄清楚我是什么在这里不见了:

有人可以帮忙吗?

<div class="container">
 <div class="row">
    <div class="col-lg-10">
        <section id="Search">
            <hr />

            <div class="form-group col-md-10">
                @Html.Label("Clinic Code:", new { @class = "col-md-2 control-label" })
                @Html.TextBox("ClinicCode", "", new { @class = "form-control" })
            </div>

                    </div>

                    <br />
                    <div class="form-group">
                        <div class="col-md-offset-2 col-md-10">
                            <input type="button" value="Search" class="btn btn-primary" id="searchButton" />
                        </div>
                    </div>

        </section>
    </div>
</div>
</div>
     <div id="partial">
      @Html.Partial("_PartialDetails", Model)
     </div>
    <div id="loading" style="display:none">
       <img src="~/images/ajax-loader.gif" />
</div>
@section Scripts {    
<script type="text/javascript">

$(function () {

    $.ajaxSetup({
        beforeSend: function () {
            // show gif here, eg:
            $("#loading").show();
        },
        complete: function () {
            // hide gif here, eg:
            $("#loading").hide();
        }
    });
});

     $('#searchButton').click(function (e) {
        searchReferrals(e);
    });

}

---通过母版页加载的app.js文件

 function searchReferrals(e) {


        $.ajax({
            url: "/Demo/GetReferralDetails/",
            data: {ClinicCode: ClinicCode, },
            cache: false,
            type: "post",
            dataType: "html",
            success: function (result) {
                $('#partial').html("");
                $("#partial").html(result);

                $('#checkall').on('click', function () {
                    var chk = $(this).is(':checked');
                    $('input[type=checkbox]', "#Data").each(function () {
                        if (chk) {

                            $(this).attr('checked', 'checked');
                        }
                        else {
                            $(this).removeAttr('checked');
                        }
                    });

                });

            },
            error: function (jqXHR, textStatus, errorThrown) {
                $("#partial").html("");
                $('#partial').html('<p>status code: ' + jqXHR.status + '</p><p>errorThrown: ' + errorThrown + '</p><p>jqXHR.responseText:</p><div>' + jqXHR.responseText + '</div>');
                console.log('jqXHR:');
                console.log(jqXHR);
                console.log('textStatus:');
                console.log(textStatus);
                console.log('errorThrown:');
                console.log(errorThrown);
            },
        });
}

}

1 个答案:

答案 0 :(得分:1)

#loading可能是#partial的一部分,当您清除ajax中的#partial时,您将删除#loading div,请确保正确关闭{ {1}}