如何使用 jQuery 等待替换

Posted 2023-05-08

【中文标题】如何使用 jQuery 等待替换

【英文标题】：How to wait for replace with using jQuery

【发布时间】：2018-07-10 00:57:08

【问题描述】：

我正在使用以下代码更新视图中的模式，然后使用控制器操作替换内容。

 $('#myTable1, #myTable2').on('click', 'a.editor_edit', function (e) 
            e.preventDefault();

            //console.log(e.target);
            //console.log(this.closest('table'));


            var passedId = $(this).attr("id");
            //console.log(passedId);

            $.get('/Controller/EditCustomer/' + passedId, function (data) 
                console.log(data);
                $('#partial').replaceWith(data);
                $('#reportModal').modal('show');
            );

        );

但是当模态出现时，它仍然保存第一个 id 的数据。而且它永远不会更新模态框内的内容。

我怀疑它要么是模态，要么是我过早地显示模态（在替换完成之前）。

当我执行 console.log 时，我每次都会得到新数据...

在 Index.cshtml 中，我有这个。

<div id="partial" style="display: none">

</div>

局部视图看起来像，

@model MyModel

<div class="modal fade" id="reportModal" tabindex="-1" role="dialog" aria-labelledby="reportModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&#xD7;</span></button>
                <h4 class="modal-title" id="reportModalLabel">Edit Customer:</h4>
                @if (Model != null)
                
                    using (Html.BeginForm())
                    
                        @Html.AntiForgeryToken()

                        <div class="form-horizontal">
                            <h4>Customer</h4>
                            <hr />
                            @Html.ValidationSummary(true, "", new  @class = "text-danger" )
                            @Html.HiddenFor(model => model.ID)

                            <div class="form-group">
                                @Html.LabelFor(model => model.Name, htmlAttributes: new  @class = "control-label col-md-2" )
                                <div class="col-md-10">
                                    @Html.EditorFor(model => model.Name, new  htmlAttributes = new  @class = "form-control"  )
                                    @Html.ValidationMessageFor(model => model.Name, "", new  @class = "text-danger" )
                                </div>
                            </div>

                            <div class="form-group">
                                @Html.LabelFor(model => model.Description, htmlAttributes: new  @class = "control-label col-md-2" )
                                <div class="col-md-10">
                                    @Html.EditorFor(model => model.Description, new  htmlAttributes = new  @class = "form-control"  )
                                    @Html.ValidationMessageFor(model => model.Description, "", new  @class = "text-danger" )
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-md-offset-2 col-md-10">
                                    <input type="submit" value="Save" class="btn btn-default" />
                                </div>
                            </div>
                        </div>
                    

                
            </div>
            <div class="modal-body">
                <canvas id="reportsChart"  ></canvas>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" id="modal-cancel-b">Cancel</button>
                <button type="button" class="btn btn-primary"  aria-haspopup="true" aria-expanded="false">Save</button>
            </div>
        </div>
    </div>
</div>

【问题讨论】：

我们需要更多信息，包括相关的html

并且由于您使用replaceWith()，您返回的部分是否还包含id="partial" 的元素？ （我怀疑你可能想要$('#partial').html(data);）

不，我返回的部分不包含 id 为 partial 的元素

那么你需要$('#partial').html(data);（我会尽快添加一个解释原因的答案）

replaceWith() 将元素替换为部分元素，因此它第一次应该可以工作。但是因为 <div id="partial"> 元素不再存在，那么您第二次调用 $('#partial').replaceWith(data); 它不会做任何事情 - 不再有 <div id="partial"> 的元素

【参考方案1】：

replaceWith() 替换您选择的元素，因此第一次执行脚本时，<div id="partial"> 元素将替换为您的局部视图。但是由于部分不包含带有id="partial" 的封闭元素，所以下次执行脚本时，您的$('#partial').replaceWith(data); 什么也不做，因为DOM 中不再有带有id="partial" 的元素。

相反，您需要使用 $('#partial').html(data); 替换元素的内容而不是元素本身。

您还需要从元素中删除 style="display: none"（或使用 .show() 使其在 ajax 回调中可见，尽管似乎没有理由将其隐藏）

ajax调用应该是

$.get('/Controller/EditCustomer/' + passedId, function (data) 
    console.log(data);
    $('#partial').html(data);
    $('#reportModal').modal('show');
);

虽然它总是首选使用@Url.Action() 来生成网址

$.get('@Url.Action("EditCustomer", "Controller")'  id: passedId , function (data) 

您的代码还有一些其他问题需要考虑

您目前不会获得任何客户端验证，因此您需要 在成功回调中重新解析 $.validator - 参考 Required field validations not working in JQuery Popup MVC 4 您可以通过在视图中包含部分来提高性能 最初（比如使用@Html.Partial("yourPartialName", new MyModel())）并让您的方法返回一个JsonResult MyModel 实例，然后您可以使用它来更新表单 控制。您不仅会发送回更少的数据 客户端，您不需要重新解析 $.validator 这是 昂贵的。如果所有属性值都已经在 DOM 中 （例如，作为表格的列），那么您将不需要任何 ajax 调用（只需从这些值更新表单控件） 你还需要考虑ModelState在 控制器 POST 方法以及如何处理返回视图