引导模式无法与我的 ajax 代码一起正常工作答案

【问题标题】：Bootstrap modal does not work correctly with my ajax code引导模式无法与我的 ajax 代码一起正常工作
【发布时间】：2019-09-04 05:50:47
【问题描述】：

我创建了一个名为 ModalReq 的局部视图，它需要使用来自数据库的数据进行填充。

控制器和视图工作正常。

但是当你点击一个'.car-box'类的元素时，一开始什么都没有发生，第二次按下后，出现正确填充的模态，但它不想以任何方式关闭，如何使模态正常工作？

主视图中的 Ajax 代码：

<script>
    function ajaxReq(url,type,selector) {
    $.ajax({
        url: url,
        type: type,
        contentType: 'application/json',

        success: function (data) {
            $(selector).html(data);
        }
    });
    }
</script>

<script>
$(document).on('click', '.car-box', function () {
    var objText = $(this).children('.box-his').children("span").text();
    var objId = objText.substring(1, objText.length);

    ajaxReq("@Url.Action("ModalReq")" + "?productId=" + objId, "POST", '#result');
    $('#myModal').modal('show')
});
</script>

我在这个视图的最底部创建了一个 div（但仍在 Ajax 代码上方）

<div id="result"></div>

当您单击具有“.car-box”类的元素时，Ajax 代码会创建一个对象，该对象会在卡片内以字符串类型接收其编号。然后它只留下一个具有相同类型字符串的数字。然后我调用 ajaxReq，在其中传输接受我们指定的 Id 的部分视图。然后包括创建的模态...

我以前从不使用 ajax，所以我需要你的帮助 =)

【问题讨论】：

标签： javascript ajax asp.net-mvc bootstrap-modal asp.net-ajax

【解决方案1】：

在当前迭代中，$('#myModal').modal('show') 不等待 Ajax 响应。

将其转移到您的成功职能部门怎么样？

success: function (data) {
        $(selector).html(data);
        $('#myModal').modal('show')
    }

然后modal会一键获取数据。

或者：这个答案jQuery ajax with ES6 Promises 应该会指导您将其设置为 Promise。

【讨论】：