使用AJAX结果动态更新Bootstrap Modal,无需保留模态或重新加载其内容

时间:2014-10-17 00:29:39

标签: javascript jquery ajax twitter-bootstrap twitter-bootstrap-3

我需要从Bootstrap模式中的Ajax调用结果动态加载内容,但我不知道如何或是否可能。这就是我在jQuery代码中所做的:

$('button#btnBuscar').on('click', function (ev) {
    ev.preventDefault();

    $.post(Routing.generate('filtrarNormas'), $('#buscadorNorma').serialize(), 'json')
            .done(function (data, textStatus, jqXHR) {
                if (data.entities.length > 1) {
                    $('#resultadoNorma').show();

                    var $html = '';
                    data.entities.forEach(function (value, index, array) {
                        $html += '<tr>';
                        $html += '<th><input type="checkbox" value="' + value.id + '"></th>';
                        $html += '<th>' + value.codigo + '</th>';
                        $html += '<th>' + value.norma + '</th>';
                        $html += '<th>' + value.anno + '</th>';
                        $html += '<th>' + value.comiteTecnico + '</th>';
                        $html += '</tr>';
                    });

                    $("#resultadoNormaBody").html($html);
                }
            })
            .fail();
});

基本上这是模态(我删除了一些代码,让帖子可读):

<div class="modal fade " id="addNorma" tabindex="-1" role="dialog" aria-labelledby="addNorma" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-body">
                <form id="buscadorNorma" method="POST">
                    // here goes some fields for search purpose
                </form>
                <button type="button" class="btn btn-default pull-right" disabled="disabled" id="btnBuscar"><i class="fa fa-binoculars"></i> Buscar</button>
                <fieldset class="rpni-border" id="resultadoNorma" style="display: none">
                    <table class="table">
                        <thead>
                            <tr>
                                <th></th>
                                <th>Nro.</th>
                                <th>Name</th>
                                <th>Year</th>
                                <th>CT Name</th>
                            </tr>
                        </thead>
                        <tbody id="resultadoNormaBody">

                        </tbody>
                    </table>
                </fieldset>
            </div>
        </div>
    </div>
</div>

如果点击button#btnBuscar $.post被触发,然后结果是JSON格式,我应该动态更新#resultadoNormaBody,但我的解决方案不起作用,因为我没有得到结果在#resultadoNormaBody以及fieldset#resultadoNorma中永远不会显示,所以我想念一些内容,可以给我一些帮助或提示如何做到这一点吗?

啊,重要!!模态不应该是离开意味着不应该关闭并重新打开,因为那时我将丢失表单值,这是错误的

0 个答案:

没有答案