Show bootstrap modal when a list in managed bean is not empty

Question

I'm using bootstrap modal to show the selected list of data. How can I show the modal when the list in managed bean is not empty.

My modal is

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

Can I enclose the modal in something like this?

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

Or can I trigger the modal when something is added to the list in managed bean.

Please help me out.

How this problem directly PrimeFaces related (I'm 'using' PrimeFaces is not the right answer ;-)) — Kukeltje, Mar 24 '16 at 08:36

madalinivascu · Answer 1 · 2016-03-24T07:54:34.043

0

if you want to hide a modal in js you use bootstrap's hide syntax

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

edited Mar 24 '16 at 07:54

answered Mar 24 '16 at 07:46

madalinivascu

32,064
4
39
55

The modal is showing fine. But I'm concerned about the timing. To display it using IF clause as you told earlier. – Chethan Mar 24 '16 at 07:48
you add dynamic content to the modal with jquery? – madalinivascu Mar 24 '16 at 07:49
Yeah I'll add to the list. It will be refreshed in data-table using Poll. – Chethan Mar 24 '16 at 07:50
i don't see any js in this ugly jsp page – madalinivascu Mar 24 '16 at 07:52
I have not pasted it here. – Chethan Mar 24 '16 at 07:54
why don't you paste it here? – madalinivascu Mar 24 '16 at 07:56
@madalinivascu: It's not ugly and most likely not jsp but a facelet. The fact that you do not know it doesn't make it ugly. In this case the condition in the `if` should contain an EL like the OP used in his question: `#{not empty trip.customList}` – Kukeltje Mar 24 '16 at 08:39
using http://stackoverflow.com/questions/20877239/how-to-make-modal-dialog-open-at-page-load-in-bootstrap might also be an option – Kukeltje Mar 24 '16 at 09:20

Show bootstrap modal when a list in managed bean is not empty

1 Answers1