我需要从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
中永远不会显示,所以我想念一些内容,可以给我一些帮助或提示如何做到这一点吗?
啊,重要!!模态不应该是离开意味着不应该关闭并重新打开,因为那时我将丢失表单值,这是错误的