Confirm dialog shown before ajax request sent to controller

Question

Example from show case:

 <h:form>
        <p:dataTable id="tableStateDT" var="car" value="#{dtTableStateView.cars}" widgetVar="carsTable" multiViewState="true"
                     rows="10" paginator="true"
                     paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                     rowsPerPageTemplate="5,10,15"
                     selectionMode="single" selection="#{dtTableStateView.selectedCar}" rowKey="#{car.id}"
                     emptyMessage="No cars found with given criteria" filteredValue="#{dtTableStateView.filteredCars}">

            <f:facet name="header">
                <p:outputPanel>
                    <h:outputText value="Search all fields:" />
                    <p:inputText id="globalFilter" onkeyup="PF('carsTable').filter()" style="width:150px" placeholder="Enter keyword"/>
                </p:outputPanel>
            </f:facet>

            <p:ajax event="rowSelect" update=":form:carDetail" oncomplete="PF('carDialog').show()" />

            <p:column headerText="Id" filterBy="#{car.id}" sortBy="#{car.id}" filterMatchMode="contains">
                <h:outputText value="#{car.id}" />
            </p:column>

            <p:column headerText="Year" filterBy="#{car.year}" sortBy="#{car.year}" filterMatchMode="startsWith">
                <h:outputText value="#{car.year}" />
            </p:column>

            <p:column headerText="Brand" filterBy="#{car.brand}" sortBy="#{car.brand}" filterMatchMode="exact">
                <f:facet name="filter">
                    <p:selectOneMenu onchange="PF('carsTable').filter()" style="width:100px;" >
                        <f:selectItem itemLabel="Select One" itemValue="#{null}" noSelectionOption="true" />
                        <f:selectItems value="#{dtTableStateView.brands}" />
                    </p:selectOneMenu>
                </f:facet>
                <h:outputText value="#{car.brand}" />
            </p:column>

            <p:column headerText="Color" filterBy="#{car.color}" sortBy="#{car.color}" filterMatchMode="in">
                <f:facet name="filter">
                    <p:selectCheckboxMenu label="Colors" onchange="PF('carsTable').filter()" style="width:80px;" panelStyle="width:125px" scrollHeight="150">
                        <f:selectItems value="#{dtTableStateView.colors}" />
                    </p:selectCheckboxMenu>
                </f:facet>
                <h:outputText value="#{car.color}" />
            </p:column>
        </p:dataTable>

        <p:dialog header="Car Info" widgetVar="carDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false">
            <p:outputPanel id="carDetail" style="text-align:center;">
                <p:panelGrid  columns="2" rendered="#{not empty dtTableStateView.selectedCar}" columnClasses="label,value">
                    <f:facet name="header">
                        <p:graphicImage name="demo/images/car/#{dtTableStateView.selectedCar.brand}-big.gif"/> 
                    </f:facet>

                    <h:outputText value="Id:" />
                    <h:outputText value="#{dtTableStateView.selectedCar.id}" />

                    <h:outputText value="Year" />
                    <h:outputText value="#{dtTableStateView.selectedCar.year}" />

                    <h:outputText value="Brand" />
                    <h:outputText value="#{dtTableStateView.selectedCar.brand}" />

                    <h:outputText value="Color:" />
                    <h:outputText value="#{dtTableStateView.selectedCar.color}" style="color:#{dtTableStateView.selectedCar.color}"/>
                </p:panelGrid>
            </p:outputPanel>
        </p:dialog>
    </h:form>

: When user click on any row/Cell PF('carDialog').show() called.

But I want to confirm from user(Yes or No) to show car details or not. Before ajax request sent.

Answer 1

Use the p:confirmDialog from PrimeFaces and change from rowSelect to a button solution.

    <p:dataTable id="basicDT" var="car" value="#{selectionView.cars1}">
        <f:facet name="header">Basic</f:facet>
        <p:column headerText="Id">
            <h:outputText value="#{car.id}" />
        </p:column>
        <p:column headerText="Year">
            <h:outputText value="#{car.year}" />
        </p:column>
        <p:column headerText="Brand">
            <h:outputText value="#{car.brand}" />
        </p:column>
        <p:column headerText="Color">
            <h:outputText value="#{car.color}" />
        </p:column>
        <p:column style="width:32px;text-align: center">
            <p:commandButton oncomplete="PF('carDialog').show()"
                icon="ui-icon-search" title="View">
                <f:setPropertyActionListener value="#{car}"
                    target="#{selectionView.selectedCar}" />
                <p:confirm header="Confirmation" message="Are you sure?"
                    icon="ui-icon-alert" />
            </p:commandButton>
        </p:column>
    </p:dataTable>

    <p:confirmDialog global="true" showEffect="fade" hideEffect="fade">
            <p:commandButton value="Yes" type="button"
                styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
            <p:commandButton value="No" type="button"
                styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
    </p:confirmDialog>

    <p:dialog header="Car Info" widgetVar="carDialog" modal="true"
        showEffect="fade" hideEffect="fade" resizable="false">
        <p:outputPanel id="carDetail" style="text-align:center;">
            <p:panelGrid columns="2"
                rendered="#{not empty selectionView.selectedCar}"
                columnClasses="label,value">

                <h:outputText value="Id:" />
                <h:outputText value="#{selectionView.selectedCar.id}" />

                <h:outputText value="Year" />
                <h:outputText value="#{selectionView.selectedCar.year}" />

                <h:outputText value="Color:" />
                <h:outputText value="#{selectionView.selectedCar.color}" />

            </p:panelGrid>
        </p:outputPanel>
    </p:dialog>

https://www.primefaces.org/showcase/ui/overlay/confirmDialog.xhtml