Question

我试图通过.ajax调用检索数据，并将响应html代码添加到bootstrap模式体。但我一直收到这个错误：

jquery-3.1.0.min.js：2未捕获错误：语法错误，无法识别的表达式：http://localhost/menu/create

实际上我确实收到了所需的数据作为响应，但由于此错误，数据无法显示在模态窗口中。

这是我的代码。当我单击一个链接时，ajax调用返回一个html表单并将其插入到模态体中。然后显示模态窗口。

<a href="{{route('menu.create')}}" class="btn btn-default pull-right show-new-menu-item-modal" data-toggle="modal">New Menu Item</a>

$('body').on('click', '.show-new-menu-item-modal', function(event) {
event.preventDefault();
 $.ajax({
        url: $(this).attr('href'),
        dataType: 'html',
        success: function(response) {
            $("#new-menu-item-body").html(response);
        }
    });
    $('#new-menu-item-modal').modal('show');
});

我一直在谷歌搜索和更改代码几个小时但仍然没有运气。如果有人能给我一些想法，我将非常感激。提前谢谢！

Answer 1

我怀疑这是由于引导程序以及你在元素上设置了data-toggle="modal"这一事实。

尝试删除它。您正在自己初始化模态。

我认为发生的事情是因为您没有使用与data-target关联所需的data-toggle它正试图将href用作模式的jQuery选择器id，如果你这样做会抛出你看到的错误

Answer 2

@charlietfl是对的，你无法阻止对模态的默认操作，如果你这样做，它根本不会打开，检查在bootstrap文档中调用模态的javascript方式，它有一个你可以修复的用来制作你想要的东西，检查这个网址：http://getbootstrap.com/javascript/。

希望你解决

贝斯茨！

Answer 3

如果您没有Bootstrap模型，并且遇到语法错误，请确保返回的HTML在第一个DOM节点之前没有空格。

jQuery .ajax语法错误，无法识别的表达式

3 个答案: