javascript - Grails:twitter bootstrap 3 模式在每次迭代中都有相同的内容

Question

我有这个迭代每个项目的代码。然后它会将其显示在列表中。现在我尝试通过 <g:include controller="superAdmin" action="showMenuItemModal" id="${m.id}"/> 显示单个项目的详细信息在 bootstrap 3 的 modal 主体中。

它有效，但问题是每个模式中仅显示最顶层的详细信息。因此，如果我有两个或更多项目，假设项目 1 是第一个，我单击项目 2，但它仍然显示项目 1 详细信息

<g:each in="${menuInstance.menuItem}" var="m">
    <ul style="padding-left:0px;">
        <a href="#myModal" data-toggle="modal">${m.menuItemName?.encodeAsHTML()}</a>
    </ul>

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <g:include controller="superAdmin" action="showMenuItemModal" id="${m.id}"/>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->                                              
</g:each>

这是我的 showMenuItemModal

def showMenuItemModal(Long id){
    def menuItemInstance = MenuItem.get(id)
    if (!menuItemInstance) {
        flash.message = message(code: 'default.not.found.message', args: [message(code: 'menuItem.label', default: 'MenuItem'), id])
        redirect(action: "listMenu")
        return
    }

    [menuItemInstance: menuItemInstance]
}

及其showMenuItemModal.gsp

    <%@ page import="rms.MenuItem" %>   
        <div class="row" style="font-size:12px; border-radius:10px; background-color: #f5f5f5; margin:auto 0px auto 0px;">

            <div class="col-xs-7">
                <ol class="property-list">                              

                <g:if test="${menuItemInstance?.menuItemName}">
                <li class="fieldcontain">
                    <span id="menuItemName-label" class="property-label"><g:message code="menuItem.menuItemName.label" default="Menu Item Name" /></span>

                        <span class="property-value" aria-labelledby="menuItemName-label"><g:fieldValue bean="${menuItemInstance}" field="menuItemName"/></span>

                </li>
                </g:if>

                <g:if test="${menuItemInstance?.menuItemDescription}">
                <li class="fieldcontain">
                    <span id="menuItemDescription-label" class="property-label"><g:message code="menuItem.menuItemDescription.label" default="Menu Item Description" /></span>

                        <span class="property-value" aria-labelledby="menuItemDescription-label"><g:fieldValue bean="${menuItemInstance}" field="menuItemDescription"/></span>

                </li>
                </g:if>

                <g:if test="${menuItemInstance?.category}">
                <li class="fieldcontain">
                    <span id="category-label" class="property-label"><g:message code="menuItem.category.label" default="Category" /></span>

                        <span class="property-value" aria-labelledby="category-label"><g:fieldValue bean="${menuItemInstance}" field="category"/></span>

                </li>
                </g:if>

                <g:if test="${menuItemInstance?.price}">
                <li class="fieldcontain">
                    <span id="price-label" class="property-label"><g:message code="menuItem.price.label" default="Price" /></span>

                        <span class="property-value" aria-labelledby="price-label"><g:fieldValue bean="${menuItemInstance}" field="price"/></span>

                </li>
                </g:if>

                <g:if test="${menuItemInstance?.numberOfServing}">
                <li class="fieldcontain">
                    <span id="numberOfServing-label" class="property-label"><g:message code="menuItem.numberOfServing.label" default="Number Of Serving" /></span>

                        <span class="property-value" aria-labelledby="numberOfServing-label"><g:fieldValue bean="${menuItemInstance}" field="numberOfServing"/></span>

                </li>
                </g:if>

                <g:if test="${menuItemInstance?.cookingTime}">
                <li class="fieldcontain">
                    <span id="cookingTime-label" class="property-label"><g:message code="menuItem.cookingTime.label" default="Cooking Time" /></span>

                        <span class="property-value" aria-labelledby="cookingTime-label"><g:fieldValue bean="${menuItemInstance}" field="cookingTime"/></span>

                </li>
                </g:if>

                <g:if test="${menuItemInstance?.specialty}">
                <li class="fieldcontain">
                    <span id="specialty-label" class="property-label"><g:message code="menuItem.specialty.label" default="Specialty" /></span>

                        <span class="property-value" aria-labelledby="specialty-label"><g:fieldValue bean="${menuItemInstance}" field="specialty"/></span>

                </li>
                </g:if>

                <g:if test="${menuItemInstance?.difficulty}">
                <li class="fieldcontain">
                    <span id="difficulty-label" class="property-label"><g:message code="menuItem.difficulty.label" default="Difficulty" /></span>

                        <span class="property-value" aria-labelledby="difficulty-label"><g:fieldValue bean="${menuItemInstance}" field="difficulty"/></span>

                </li>
                </g:if>

                <g:if test="${menuItemInstance?.rating}">
                <li class="fieldcontain">
                    <span id="rating-label" class="property-label"><g:message code="menuItem.rating.label" default="Rating" /></span>

                        <span class="property-value" aria-labelledby="rating-label"><g:fieldValue bean="${menuItemInstance}" field="rating"/></span>

                </li>
                </g:if>

                <g:if test="${menuItemInstance?.menuItemNumber}">
                <li class="fieldcontain">
                    <span id="menuItemNumber-label" class="property-label"><g:message code="menuItem.menuItemNumber.label" default="Menu Item Number" /></span>

                        <span class="property-value" aria-labelledby="menuItemNumber-label"><g:fieldValue bean="${menuItemInstance}" field="menuItemNumber"/></span>

                </li>
                </g:if>

                <g:if test="${menuItemInstance?.menuItemStatus}">
                <li class="fieldcontain">
                    <span id="menuItemStatus-label" class="property-label"><g:message code="menuItem.menuItemStatus.label" default="Menu Item Status" /></span>

                        <span class="property-value" aria-labelledby="menuItemStatus-label"><g:fieldValue bean="${menuItemInstance}" field="menuItemStatus"/></span>

                </li>
                </g:if>

                </ol>
            </div>

            <div class="col-xs-5">  
                <h5><strong>Picture</strong></h5>
                <g:if test="${menuItemInstance?.picture}">          
                        <img style="max-height: 250px; max-width: 250px; border:3px ridge;" src="${createLink(controller:'superAdmin' , action: 'menuItemPicture' , id: menuItemInstance.id)}" alt="Menu Item Picture" />
                </g:if> 
            </div>
        </div>

Answer 1

所有模态窗口都有相同的 id id="myModal"。因此，使用第一个具有此类 id 的值。

你必须为每个模式创建一个uniq id，例如:

....
    <a href="#myModal_${m.id}" data-toggle="modal">${m.menuItemName?.encodeAsHTML()}</a>
</ul>

<div class="modal fade" id="myModal_${m.id}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    ....