Question

我一起使用Codeigniter和Datatables，当用户点击某一行数据的“view”时，需要加载一个模态弹出窗口。

这是我与onClick的链接：

<a href="#" onClick="javascript:notes_modal()">view</a>

这是我的JS：

function notes_modal(data) {
    $.ajax({
        type: "POST",
        url: "../load_notes_modal",
    }).done(function ( html ) { 
        $("#selected_note").modal('show');
    });
}

这是我正在调用的“load_notes_modal”函数加载的视图：

<div class="modal fade" id="selected_note" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog">
    <div class="modal-content">
        Random Content!
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">View Location Note</h4>
        </div>
        <div class="modal-body"></div>
    </div>
</div>

我没有得到任何错误，只是没有运气得到模式显示。我是JS的新手并试图学习，我可能会走向完全错误的方向！

Answer 1

您需要将模态触发器置于成功回调中，如下所示：

HTML

<a href="#" class=".openModal">view</a>

JS

function notes_modal() {
    $.ajax({
        type: "POST",
        url: "../load_notes_modal",
        success: function ( html ) { 
            $("#selected_note").modal('show');
        },
        error: function() {
            alert('ajax did not succeed');
        }
    });
}

function clickListener() {
    $('.openModal').unbind();
    $('.openModal').click(function (e) {
        e.preventDefault();
        notes_modal();
    });
}

您的dataTable如下所示。从fnDrawCallback()内调用函数，以便每次绘制表时，都会调用侦听器。请注意上面所做的更改。

var oTable = $('#myTable').dataTable({
    "fnDrawCallback": function (oSettings) {
        notes_modal();
        clickListener();
    }
});

新更新：使用dataTable重绘。

使用/ Javascript和Codeigniter打开并加载模态窗口

1 个答案: