1

すべてのアイテムを繰り返すこのコードがあります。次に、それをリストに表示します。<g:include controller="superAdmin" action="showMenuItemModal" id="${m.id}"/>ここで、ブートストラップ 3 のモーダルの本体で個々のアイテムの詳細を表示しようとしました。

それは機能しますが、問題は、すべてのモーダルで最上位レベルの詳細のみが表示されることです。したがって、2 つ以上のアイテムがあり、アイテム 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>
4

1 に答える 1

1

すべてのモーダル ウィンドウは同じ idid="myModal"です。したがって、最初にそのような ID を持つものが使用されます。

次のように、モーダルごとに一意の 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">
    ....      
于 2013-10-09T08:21:11.540 に答える