我有一个场景:
这是我的HTML代码:
<input type="submit" id="btnpin" data-url="@Url.Action("PIn", "PIO")" value="P In" class="btn pin-btn" data-toggle="modal" data-target="#popup-article"/>
<div id="popup-article" class="popup">
<div class="popup__block">
<div style="overflow: auto">
<div class="top-left-logo">
<img src="~/Images/my-logo.png" width="270" height="99">
</div>
<div class="modal-top-right animated bounce delay-3s">
</div>
</div>
<div class='grid'>
<div class='col modal-left-panel '>
@{
foreach (var m in DTR.Models.DataDetails.lstDetails)
{
<div class="modal-left-text-container-top">
<div class="modal-employee-name animated bounceInLeft fast delay-2s" >@m.Name</div>
<div class="modal-employee-info">@m.Pos</div>
<div class="modal-employee-info">@m.Dep</div>
</div>
<div class="modal-left-text-container-mid">
<div class="modal-show-punch">
<div class="modal-show-punch-text">@m.PIO</div>
<div class="modal-show-punch-time">@m.IO</div>
<div class="modal-show-punch-date">@m.DateIO</div>
</div>
</div>
}
}
</div>
<div class='col modal-right-panel'>
}
</div>
</div>
</div>
</div>
这是我的JS代码:
$(document).ready(function () {
$('#btnpin').click(function () {
var url = $(this).data('url');
var punchIn = 'PunchIn';
$.ajax({
async: false,
type: "post",
contentType: "application/json; charset=utf-8",
data: "{'punchIn':'" + punchIn.toString() + "'}",
url: url,
success: function (response) {
//$(document).ajaxStop(function () {
// punchIn = null;
//});
if (response !== null && response.success) {
window.location.href = "#popup-article";
location.reload();
}
else {
alert("Already P In.");
}
},
error: function (response){
alert("Error Message");
},
});
});
});
此代码运行正常,但我的问题是我需要使用location.reload();
单击按钮btnpin
时,因为如果没有此location.reload();
加载页面时,该值已经获取并完成,但是当我单击按钮时,弹出部分上没有其他显示。
此location.reload();
的问题,页面显示了两次并且很烦人,但是页面和值却完美地加载了。
如何使用此location.reload();
来实现?似乎页面加载时,我需要在特定的.fucos()
类上有一些popup
。
任何想法都值得赞赏。