Question

我正在尝试对服务器执行GET请求，并使用数据库中的数据填充模式。我试图让它像API一样，以便将来更容易。

通过向所有锚标记添加showAjaxModal类，我尝试自动加载模态并对锚标记的href属性执行ajax请求。

然而，这样做，一切正常，但模态立即消失，我收到此错误信息：

主线程上的同步XMLHttpRequest因其对最终用户体验的不利影响而被弃用。如需更多帮助，请查看https://xhr.spec.whatwg.org/。

代码：

<a class="btn btn-primary showAjaxModal" data-toggle="modal" href="/api/path-to-request" data-target="#modal-id">Trigger modal</a>

模态：

<div class="modal fade" id="modal-id">

    <div class="modal-dialog">

        <div id="modal-loading-icon"></div>

        <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Modal title</h4>
            </div>

            <div class="modal-body">
                Modal body ...
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>

        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

我的Ajax代码：

 $('.showAjaxModal').click(function (event) {
            var loadingIcon = $('.modal-loading-icon');
            var ajaxUrl = $(this).attr('href');

            $.ajax({
                url: ajaxUrl,
                beforeSend: function () {
                    loadingIcon.show();
                }
            }).success(function (data) {

                event.preventDefault();
                loadingIcon.hide();
//              $('.modal-body').html(data);
                $('.modal-body').html('test');

            });
        });

我到底错在了什么？请帮忙。

谢谢！

Answer 1

将您的链接更改为：

<a class="btn btn-primary showAjaxModal">Trigger modal</a>

并添加

$('#modal-id').modal('show'); //add this line to your success callback

-

success(function (data) {
   event.preventDefault();
   $('#modal-id').modal('show'); //add
   loadingIcon.hide();
   // $('.modal-body').html(data);
   $('.modal-body').html('test');

   });

工作演示：https://jsfiddle.net/43jj3q30/3/

Bootstrap模式 - 单击

1 个答案: