jquery - Grails:如何在 Twitter Bootstrap 3 模式中重新初始化 AJAX 内容

Question

我有一个模式。对于 tableInstance 的每次迭代，数据库都会将其默认内容加载到其中。然后我有一个 remoteLink 按钮，单击它时会更新 tableShown 。

问题是，如果您单击了 remoteLink 按钮并关闭了模式，则当显示模式时，remoteLink 的内容仍然存在。它应该是从数据库加载的默认内容。

如何重新初始化模态框的内容？我尝试过

<g:javascript>
    $("#show_${t.id}").on('hidden.bs.modal', function () {
         $(this).data('bs.modal', null);
    });
</g:javascript>

但它仍然显示内容

<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>          

这是我的完整代码片段

<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">&times;</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>

Answer 1

您的代码不起作用的原因是(我想)因为表单提交覆盖了remoteLink，因此它正在重新加载页面，这将重置您的内容，使其保持不变。我不太确定你为什么要使用表格。我没有足够高的代表来发表评论来提出这个问题，所以我将提供我会采取哪些不同的做法。

我会改变这个:

<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>

对此:

<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>

除非您使用表单有特定原因，否则这应该完全符合您的需要。希望这有帮助!