Question

我创建了一个名为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，所以我需要您的帮助=）

Answer 1

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

如何将其移至成功功能？

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

然后，一按该模态将获取数据。

或者：此答案jQuery ajax with ES6 Promises应该为您提供指导，将其设置为Promise。

Bootstrap modal无法与我的Ajax代码一起正常工作

1 个答案: