Индикатор загрузки Ajax работает только в первый раз, а затем индикатор не появляется

Question

У меня есть следующий код, где все работает нормально, за исключением индикатора загрузки, который работает только при первом нажатии кнопки поиска, но после первого события он больше не появляется снова, и я не могу понять, что я здесь отсутствует:

Может ли кто-нибудь помочь, пожалуйста?

<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);
            },
        });
}

}

Answer 1

#loading может быть частью #partial, когда вы очищаете #partial в ajax, вы удаляете div #loading, убедитесь, что вы правильно закрыли свои div в вашем #partial