我有以下代码,除了加载指示器仅在我第一次单击搜索按钮时才起作用之外,其他一切正常,但是在第一个事件发生后,它再也不会出现了,我无法弄清楚我是什么在这里不见了:
有人可以帮忙吗?
<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);
},
});
}
}
答案 0 :(得分:1)
#loading
可能是#partial
的一部分,当您清除ajax中的#partial
时,您将删除#loading div,请确保正确关闭{ {1}}