Показать bootstrap modal, когда список в управляемом компоненте не пуст

Question

Я использую bootstrap modal для отображения выбранного списка данных. Как показать модальность, когда список в управляемом компоненте не пуст.

Мой модальное

    <div id="modalPanel-1" data-backdrop="static" class="modal hide fade in"> 
           <div class="modal-header"><a data-dismiss="modal" class="close" id="closeModal" onclick="reconstruct()">×</a> 
            <h3>Selected Trips</h3></div> 
           <div class="modal-body" style="width: 100%;"> 
            <p:panel style="border: medium none;" id="modalPanel-1-panel"> 
             <h:form id="modalForm"> 
              <h:selectOneMenu style="width:25%;" 
                  value="#{userAction.assignVehicleSelectedVehicleID}"> 
               <f:selectItem itemLabel="Select Vehicle"></f:selectItem> 
               <f:selectItems value="#{userAction.allVehicleList}"></f:selectItems> 
               <p:ajax listener="#{userAction.assignVehicleChangeHandler}" 
                 process="@this" update="@form"/> 
              </h:selectOneMenu> 
              <h:selectOneMenu id="driver" style="width:25%; margin-left: 10px;" 
                  value="#{userAction.assignVehicleSelectedDriverID}"> 
               <f:selectItem itemLabel="Select Driver"></f:selectItem> 
               <f:selectItems value="#{userAction.drivername}"/> 
              </h:selectOneMenu> 
              <h:commandButton 
                styleClass="btn btn-success" value="New Ride" 
                style="margin-left: 20px; margin-top: -10px;"> 
               <p:ajax listener="#{userAction.linkVehicleForAssignVehicle}" 
                 process="@form" update="@form, :treeTableForm" oncomplete="clearModalErr();"></p:ajax> 
              </h:commandButton>            
              <div> 
               <ul></ul> 
              </div> 
              <p:dataTable value="#{userAction.selectedMatchedTripDTOs}" var="trip" 
                 rendered="true" expandedRow="true"> 
               <p:column headerText="Group ID"> 
                <h:outputText value="#{trip.groupId}"></h:outputText> 
               </p:column> 
               <p:column headerText="Route"> 
                <h:outputText value="#{trip.route}"></h:outputText> 
               </p:column> 
               <p:column headerText="Requester"> 
                <h:outputText value="#{trip.userName}"></h:outputText> 
               </p:column> 
               <p:column headerText="Count"> 
                <h:outputText value="#{trip.count}"></h:outputText> 
               </p:column> 
               <p:column headerText="Ride ID"> 
                <h:outputText value="#{trip.rideId}"></h:outputText> 
               </p:column> 
               <p:column> 
                <f:facet name="header">Action</f:facet> 
                <h:commandLink rendered="true" disabled="false"> 
                 <i class="fa fa-trash" title="Delete"></i> 
                 <p:ajax listener="#{userAction.removeTripFromSelectedList(trip)}" 
                   update=":modalForm"/> 
                </h:commandLink> 
               </p:column> 
               <p:rowExpansion> 
                <ul><h:outputText value="#{trip.startDate}" 
                     style="color: darkblue; font-size: 16px; padding-left: 400px;"/> 
                </ul>              
                <pm:content rendered="#{not empty trip.custom}"> 
                 <ul style="width: 100%;"><h:outputText value="Notes" 
                           style="font-size: 14px" 
                           rendered="#{not empty trip.custom}"/>&nbsp;<h:outputText 
                   rendered="#{not empty trip.custom}" 
                   value="#{trip.custom}" 
                   style="color: #999999; font-size: 14px; "/></ul> 
                </pm:content> 
               </p:rowExpansion> 
              </p:dataTable> 
             </h:form> 
            </p:panel> 
           </div> 
          </div> 

Могу ли я заключить модальность в чем-то вроде этого?

<pm:content rendered="#{not empty trip.customList}"> </pm:content> 

Или могу вызвать механизм, когда что-то добавлено в список в управляемом компоненте.

Пожалуйста, помогите мне.

Answer 1

, если вы хотите, чтобы скрыть модальность в JS используется шкура синтаксис Bootstrap в

if (data.length > 0) { 
    $('#modalPanel-1').modal('hide'); 
}