Grails的：如何重新初始化叽叽喳喳引导3模式的AJAX内容 [英] Grails: how to re initialize AJAX content in twitter bootstrap 3 modal
本文介绍了Grails的：如何重新初始化叽叽喳喳引导3模式的AJAX内容的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个模式。其默认的内容被装入它由数据库为tableInstance的每次迭代。然后，我有一个 remoteLink 按钮，更新 tableShown 被点击时。
问题是，如果你点击了 remoteLink 按钮，并关闭模式， remoteLink 的内容显示模态时仍然存在。它应该是一个从数据库加载默认内容
你如何重新初始化模式的内容？我尝试着用
＆LT; G：JavaScript的＆GT;
$（＃展示_ $ {t.id}）。在（'hidden.bs.modal'，函数（）{
$（本）的.data（'bs.modal'，NULL）;
}）;
＆LT; / G：JavaScript的＆GT;
但它仍然显示的内容
＆LT; G：remoteLink ID =$ {t.id}控制器=超级管理员行动=editTable更新=tableShown _ $ {t.id}＆GT;
＆LT;按钮类型=提交级=BTN BTN-主要拉右的风格=保证金右：5像素;＆GT;
＆LT;跨度类=glyphicon glyphicon-软盘删除＆GT;＆LT; / SPAN＆GT;编辑
＆LT; /按钮＆GT;
＆LT; / G：remoteLink＆GT;
下面是我的全部code段
＆LT; G：每=$ {tableInstanceList.sort {A，B＆GT; a.tableNumber.compareTo（b.tableNumber）}}VAR =T ＆GT;
＆LT; A HREF =＃展示_ $ {t.id}数据切换=模式类=表＆GT;表$ {？t.tableNumber .EN codeAsHTML（）}＆LT; / A＆GT;
＆LT; DIV CLASS =模式变脸ID =显示_ $ {t.id}的tabindex = - 1角色=对话框中的咏叹调 - labelledby =myModalLabelARIA隐藏=真＆GT;
＆LT; DIV CLASS =模式 - 对话的风格=宽度：43％;＆GT;
＆LT; DIV CLASS =模式的内容＆GT;
＆LT; DIV CLASS =模态体＆GT;
＆LT;按钮样式=保证金：5px的7px的0px 0px;类型=按钮级=关闭数据解雇=莫代尔ARIA隐藏=真＆GT;＆安培;倍;＆LT; /按钮＆GT;
＆LT; DIV ID =tableShown _ $ {t.id}＆GT;
＆LT;醇类=属性列表＆GT;
＆LT; G：如果测试=$ {？吨.tableNumber}＆GT;
＆LT;李类=fieldcontain的风格=保证金左：6px;＆GT;
＆LT;跨度ID =tableNumber标签级=属性标签＆GT;＆LT; G：消息code =table.tableNumber.label默认为表号/＆GT;＆LT; / SPAN＆GT;
＆LT;跨度类=属性值咏叹调 - labelledby =tableNumber标签＆GT;＆LT; G：fieldValue方法豆=$ {T】字段=tableNumber/＆GT;＆LT; / SPAN＆GT;
＆LT; /李＆GT;
＆LT; / G：如果＆GT;
＆LT; G：如果测试=$ {？吨.numberOfChairs}＆GT;
＆LT;李类=fieldcontain＆GT;
＆LT;跨度ID =numberOfChairs标签级=属性标签＆GT;＆LT; G：消息code =table.numberOfChairs.label默认值= /＆GT椅子的数量;＆LT; / SPAN＆GT ;
＆LT;跨度类=属性值咏叹调 - labelledby =numberOfChairs标签＆GT;＆LT; G：fieldValue方法豆=$ {T】字段=numberOfChairs/＆GT;＆LT; / SPAN＆GT;
＆LT; /李＆GT;
＆LT; / G：如果＆GT;
＆LT; G：如果测试=$ {？吨.mergedWith}＆GT;
＆LT;李类=fieldcontain＆GT;
＆LT;跨度ID =mergedWith标签级=属性标签＆GT;＆LT; G：消息code =table.mergedWith.label默认为合并/＆GT;＆LT; / SPAN＆GT;
＆LT;跨度类=属性值咏叹调 - labelledby =mergedWith标签＆GT;＆LT; G：fieldValue方法豆=$ {T】字段=mergedWith/＆GT;＆LT; / SPAN＆GT;
＆LT; /李＆GT;
＆LT; / G：如果＆GT;
＆LT; G：如果测试=$ {？吨.STATUS}＆GT;
＆LT;李类=fieldcontain＆GT;
＆LT;跨度ID =身份标签级=属性标签＆GT;＆LT; G：消息code =table.status.label默认值=状态/＆GT;＆LT; / SPAN＆GT;
＆LT;跨度类=属性值咏叹调 - labelledby =身份标签＆GT;＆LT; G：fieldValue方法豆=$ {T】字段=状态/＆GT;＆LT; / SPAN＆GT;
＆LT; /李＆GT;
＆LT; / G：如果＆GT;
＆LT; G：如果测试=$ {？吨.orderSlip}＆GT;
＆LT;李类=fieldcontain＆GT;
＆LT;跨度ID =orderSlip标签级=属性标签＆GT;＆LT; G：消息code =table.orderSlip.label默认为定单票据/＆GT;＆LT; / SPAN＆GT;
＆LT; G：每=$ {t.orderSlip}VAR =O＆GT;
＆LT;跨度类=属性值咏叹调 - labelledby =orderSlip标签＆GT; $ {Ø.EN codeAsHTML（）？}＆LT; / SPAN＆GT;
＆LT; / G：每个＆GT;
＆LT; /李＆GT;
＆LT; / G：如果＆GT;
＆LT; / OL＆GT;
＆LT; G：形式GT;
＆LT; G：hiddenField名=ID值=$ {t.id}/＆GT;
＆LT;按钮类型=提交级=BTN BTN-主要拉右NAME =_ action_deleteTable值=deleteTable＆GT;
＆LT;跨度类=glyphicon glyphicon-软盘删除＆GT;＆LT; / SPAN＆GT;删除
＆LT; /按钮＆GT;
＆LT; G：remoteLink ID =$ {t.id}控制器=超级管理员行动=editTable更新=tableShown _ $ {t.id}＆GT;
＆LT;按钮类型=提交级=BTN BTN-主要拉右的风格=保证金右：5像素;＆GT;
＆LT;跨度类=glyphicon glyphicon-软盘删除＆GT;＆LT; / SPAN＆GT;编辑
＆LT; /按钮＆GT;
＆LT; / G：remoteLink＆GT;
＆LT; DIV的风格=明确：既＆GT;＆LT; / DIV＆GT;
＆LT; / G：形式GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;＆LT;！ - /.modal-content - ＆GT;
＆LT; / DIV＆GT;＆LT;！ - /.modal-dialog - ＆GT;
＆LT; / DIV＆GT;＆LT;！ - /.modal - ＆GT;
＆LT; G：JavaScript的＆GT;
$（＃展示_ $ {t.id}）。在（'hidden.bs.modal'，函数（）{
$（本）的.data（'bs.modal'，NULL）;
}）;
＆LT; / G：JavaScript的＆GT;
＆LT; / G：每个＆GT;
解决方案
您code不工作的原因是（我想），因为表单提交覆盖remoteLink，所以它的重装这将重置页的含量，使其保持不变。我不明白为什么你使用的形式开始。我没有足够高的代表发表评论我要问，所以我会提供什么样的我会做出不同的。
我会改变这样的：
＆LT; G：形式GT;
＆LT; G：hiddenField名=ID值=$ {t.id}/＆GT;
＆LT;按钮类型=提交级=BTN BTN-主要拉右NAME =_ action_deleteTable值=deleteTable＆GT;
＆LT;跨度类=glyphicon glyphicon-软盘删除＆GT;＆LT; / SPAN＆GT;删除
＆LT; /按钮＆GT;
＆LT; G：remoteLink ID =$ {t.id}控制器=超级管理员行动=editTable更新=tableShown _ $ {t.id}＆GT;
＆LT;按钮类型=提交级=BTN BTN-主要拉右的风格=保证金右：5像素;＆GT;
＆LT;跨度类=glyphicon glyphicon-软盘删除＆GT;＆LT; / SPAN＆GT;编辑
＆LT; /按钮＆GT;
＆LT; / G：remoteLink＆GT;
＆LT; DIV的风格=明确：既＆GT;＆LT; / DIV＆GT;
＆LT; / G：形式GT;
要这样：
＆LT; G：链接动作=deleteTable级=BTN BTN-主要拉右ID =$ {t.id}＆GT;
＆LT;跨度类=glyphicon glyphicon-软盘删除＆GT;＆LT; / SPAN＆GT;删除
＆LT; / G：链接＆GT;
＆LT; G：remoteLink ID =$ {t.id}控制器=超级管理员行动=editTable更新=tableShown _ $ {t.id}级=BTN BTN-主要拉右的风格=保证金右：5像素;＆GT;
＆LT;跨度类=glyphicon glyphicon-软盘删除＆GT;＆LT; / SPAN＆GT;编辑
＆LT; / G：remoteLink＆GT;
＆LT; DIV的风格=明确：既;＆GT;＆LT; / DIV＆GT;
除非有你使用的是形成特定的原因，这应该做的正是你需要的。希望这有助于！
I have a modal. Its default content is loaded into it by the database for every iteration of tableInstance. Then i have a remoteLink button which updates the tableShown when it is clicked.
Problem is that if you have clicked the remoteLink button and you close the modal, the content of remoteLink is still there when the modal is shown. It is supposed to be the default content that is loaded from the database.
How do you re initialize the content of a modal? I tried it with
<g:javascript>
$("#show_${t.id}").on('hidden.bs.modal', function () {
$(this).data('bs.modal', null);
});
</g:javascript>
but it still shows the content of
<g:remoteLink id="${t.id}" controller="superAdmin" action="editTable" update="tableShown_${t.id}">
<button type="submit" class="btn btn-primary pull-right" style="margin-right:5px;">
<span class="glyphicon glyphicon-floppy-remove"></span> Edit
</button>
</g:remoteLink>
Here is my full code snippet
<g:each in="${tableInstanceList.sort{a,b-> a.tableNumber.compareTo(b.tableNumber)}}" var="t">
<a href="#show_${t.id}" data-toggle="modal" class="table" >Table ${t.tableNumber?.encodeAsHTML()}</a>
<div class="modal fade" id="show_${t.id}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" style="width:43%;">
<div class="modal-content">
<div class="modal-body">
<button style="margin:5px 7px 0px 0px; " type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<div id="tableShown_${t.id}">
<ol class="property-list">
<g:if test="${t?.tableNumber}">
<li class="fieldcontain" style="margin-left:6px;">
<span id="tableNumber-label" class="property-label"><g:message code="table.tableNumber.label" default="Table Number " /></span>
<span class="property-value" aria-labelledby="tableNumber-label"><g:fieldValue bean="${t}" field="tableNumber"/></span>
</li>
</g:if>
<g:if test="${t?.numberOfChairs}">
<li class="fieldcontain">
<span id="numberOfChairs-label" class="property-label"><g:message code="table.numberOfChairs.label" default="Number Of Chairs" /></span>
<span class="property-value" aria-labelledby="numberOfChairs-label"><g:fieldValue bean="${t}" field="numberOfChairs"/></span>
</li>
</g:if>
<g:if test="${t?.mergedWith}">
<li class="fieldcontain">
<span id="mergedWith-label" class="property-label"><g:message code="table.mergedWith.label" default="Merged With" /></span>
<span class="property-value" aria-labelledby="mergedWith-label"><g:fieldValue bean="${t}" field="mergedWith"/></span>
</li>
</g:if>
<g:if test="${t?.status}">
<li class="fieldcontain">
<span id="status-label" class="property-label"><g:message code="table.status.label" default="Status" /></span>
<span class="property-value" aria-labelledby="status-label"><g:fieldValue bean="${t}" field="status"/></span>
</li>
</g:if>
<g:if test="${t?.orderSlip}">
<li class="fieldcontain">
<span id="orderSlip-label" class="property-label"><g:message code="table.orderSlip.label" default="Order Slip" /></span>
<g:each in="${t.orderSlip}" var="o">
<span class="property-value" aria-labelledby="orderSlip-label">${o?.encodeAsHTML()}</span>
</g:each>
</li>
</g:if>
</ol>
<g:form>
<g:hiddenField name="id" value="${t.id}" />
<button type="submit" class="btn btn-primary pull-right" name="_action_deleteTable" value="deleteTable">
<span class="glyphicon glyphicon-floppy-remove"></span> Delete
</button>
<g:remoteLink id="${t.id}" controller="superAdmin" action="editTable" update="tableShown_${t.id}">
<button type="submit" class="btn btn-primary pull-right" style="margin-right:5px;">
<span class="glyphicon glyphicon-floppy-remove"></span> Edit
</button>
</g:remoteLink>
<div style="clear:both"></div>
</g:form>
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<g:javascript>
$("#show_${t.id}").on('hidden.bs.modal', function () {
$(this).data('bs.modal', null);
});
</g:javascript>
</g:each>
解决方案
The reason your code isn't working is (I imagine) because the form submission overrides the remoteLink, so it's reloading the page which would reset your content, causing it to stay the same. I'm not quite sure why you're using a form to begin with. I don't have a high enough rep to comment to ask that, so I'll provide what I would do differently.
I would change this:
<g:form>
<g:hiddenField name="id" value="${t.id}" />
<button type="submit" class="btn btn-primary pull-right" name="_action_deleteTable" value="deleteTable">
<span class="glyphicon glyphicon-floppy-remove"></span> Delete
</button>
<g:remoteLink id="${t.id}" controller="superAdmin" action="editTable" update="tableShown_${t.id}">
<button type="submit" class="btn btn-primary pull-right" style="margin-right:5px;">
<span class="glyphicon glyphicon-floppy-remove"></span> Edit
</button>
</g:remoteLink>
<div style="clear:both"></div>
</g:form>
To this:
<g:link action="deleteTable" class="btn btn-primary pull-right" id="${t.id}">
<span class="glyphicon glyphicon-floppy-remove"></span> Delete
</g:link>
<g:remoteLink id="${t.id}" controller="superAdmin" action="editTable" update="tableShown_${t.id}" class="btn btn-primary pull-right" style="margin-right:5px;">
<span class="glyphicon glyphicon-floppy-remove"></span> Edit
</g:remoteLink>
<div style="clear: both;"></div>
Unless there's a specific reason you're using a form, this should do exactly what you need. Hope this helps!
这篇关于Grails的：如何重新初始化叽叽喳喳引导3模式的AJAX内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
