单击触发器输入按钮时，弹出模式没有值

Question

我有一个场景：

这是我的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。

任何想法都值得赞赏。