Question

我发现这个代码使用ajax来加载模态，这正是我从数据表中加载动态模态所需要的。我有一个标签设置来加载模态继承人一个例子

<a class="blue" href="/api/getmodal/products/' + str(self.result.ids) + '" data-toggle="modal"> 
    <i class="icon-zoom-in bigger-130"></i> 
</a>

链接转到模态代码，只是模式代码，最后一部分是它添加的产品ID，因此它会为api创建一个唯一的请求，然后将为此页面提供服务。我一直在玩这个链接的代码jQuery ajax bootstrap modal loading现在我遇到的问题是，而不是e.preventDefault运行它似乎忽略它并跳转到链接任何人都可以看到我可能做错了什么这里。查找错误并且似乎没有任何错误在慢跑中它并没有从我发现的内容进入点击功能但在我等待响应时会继续尝试修复。

修改

jQuery正确加载到这段代码之上我正在使用jinja2并且所有重要的js都包含在我的基本模板中然后使用{{ super() }}包含在我的孩子中然后所有其他脚本在此下运行还有另外一点在此之前运行的JavaScript完全适用于数据表，我将在下面包含我的整个js部分。 console.log部分仅供我调试，以查看它是否到达代码。

jQuery(function($) {
        var oTable1 = $('#sample-table-2').dataTable( {
        "sAjaxSource": '/api/products/datatables',
        "aoColumns": [
          null, null,null, null, null,
          { "bSortable": false }
        ] } );


        $('table th input:checkbox').on('click' , function(){
            var that = this;
            $(this).closest('table').find('tr > td:first-child input:checkbox')
            .each(function(){
                this.checked = that.checked;
                $(this).closest('tr').toggleClass('selected');
            });     
        });
    })

    $(document).ready(function() {
        // Support for AJAX loaded modal window.
        $('[data-toggle="modal"]').click(function(e) {
            sleep(10000)
            e.preventDefault();
            console.log('point two');
            var url = $(this).attr('href');
            if (url.indexOf('#') == 0) {
                $(url).modal('open');
                console.log('point two');
                sleep(1000);
            } else {
                $.get(url, function(data) {
                    $('<div class="modal hide fade">' + data + '</div>').modal();
                    console.log('point three');
                });
            }
        });
    });

修改模态的链接只是一个webapp2路由我知道路由正常工作，因为它加载了模态的内容，但没有样式，因为它应该被添加到主页面并且不需要它。

修改从阅读引导程序文档，这是我提出的它不再加载到页面，但模式不起作用或我认为我没有正确但不确定。

<a class="blue" data-toggle="modal" href="/api/getmodal/products/' + str(self.result.ids) + '" data-target="#modalProduct" > 
    <i class="icon-zoom-in bigger-130"></i> 
</a>

Answer 1

data-toggle =“modal”属性是bootstraps API的一部分。这里有一些其他的东西可以将事件监听器附加到这些元素上，而你所看到的实际上是两个事件正在发生。您在单击处理程序中捕获的那个以及由bootstraps API注册的那个。

而不是使用数据属性api初始化你的模态捕获点击就像你已经做的那样并在那里初始化模态。 init代码看起来与此类似：

$('#myModal').modal({
remote:url
});

此外，如果你想延迟模态的显示，直到稍后一点（在init之后），你可以这样做：

$('#myModal').modal({
remote:url,
show:false
});

查看Bootstraps文档以获取更多信息我发现它非常适合。

http://getbootstrap.com/javascript/#modals

e.preventDefault（）被跳过进行模态加载

1 个答案: