Question

我有一个包含项目列表的表格，每个项目都有一个<select>，其中包含状态列表。这是这个过程。

当状态改变时，它应该触发一个模态。
模态是拉入ajax数据并且工作正常。
然后，用户可以单击继续或取消模式框。

这是第一次使用，但是一旦模态被解除，模态不会再次加载。数据正在更新 - 我可以在inspect元素中看到它，但模态本身并不会多次触发。

以下是相关代码：

HTML：

<select class="status form-control" data-id="14" data-ref="PT6F7SW514" name="status">
    <option value="0" selected="selected">Pending</option>
    <option value="1">Approved</option>
    <option value="2">Rejected</option>
</select>
...
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Modal Goes Here</h4>
            </div>
            <div class="modal-body"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Send</button>
            </div>
        </div>
    </div>
</div>

JS：

$(document).ready(function(){

    $('.status').change(function(){
        var status = $(this);
        var val = $(status).val();
        var id = $(status).attr('data-id');
        var ref = $(status).attr('data-ref');

        $('.modal-body').load('/ajax/status/' + ref + '/' + val);
        $('#modal').modal();

    });
});

同样，这是一个包含多个项目的表格，每个项目都有一个.status选择字段。我可以在第二次尝试触发模式的控制台中看到我收到以下错误：

Uncaught TypeError: undefined is not a function

与JS中的这一行相关联：

$('#modal').modal();

如果我评论$('.modal-body').load()，它就可以了。

我尝试将其重写为单独的ajax调用，而不是使用.load()，但我遇到了同样的问题。似乎只要我操纵＆＃39; .modal-body＆＃39;它失去了射击模态的能力。

Answer 1

你可以使用

$('#modal').modal('show'); // or .modal('hide')

显示或隐藏模态

Answer 2

我发现了问题。它实际上并不是模态的问题。我正在解雇的视图（使用Laravel）还包括<head>和<body>标签（该模式用于电子邮件预览）。这打破了功能。

bootstrap模式仅使用远程数据源触发一次

2 个答案: