`<b:commandButton>` does not invoke `<p:confirm>`

[ahofmeister]

<b:commandButton> does not fire the a <p:dialog>. You can get working example with <p:commandButton> right here: http://www.primefaces.org/showcase/ui/overlay/confirmDialog.xhtml

Apparently, It does not work with the commandButton of BootsFaces, so far.

[stephanrauh]

Let me ponder over this a while. While I do like PrimeFaces very much, I'm not sure yet I want to go so far as to support their p:confirm dialog.

[ahofmeister]

Well, maybe you (or someone else) can provide a working example (confirm with ok/cancel and invoking action) with <b:modal> (just found it on the BF page). That would be more help and is the a better way (and more flexible imo). (BTW: I am Alexander from SO)

[jbmb]

Alexander from SO, if you need working example of how to execute <b:modal>, I can provide you my solution. Please note that 1) I am not sure this answers your question :-), 2) The example makes use of PrimeFaces functions (escaping) and buttons (I use primefaces ajaxStatus)

Button to invoke a modal

<p:commandLink id="modalDialogLink" update="someForm:editDialogContent" process="@this" oncomplete="$(PrimeFaces.escapeClientId('someForm:editDialog')).modal();return false;">
     <f:setPropertyActionListener target="#{someBean.someValueToBeEdited}" value="#{someValue}"/>
     <span class="fa fa-pencil"/>
</p:commandLink>

Modal dialog

<b:modal id="editDialog">
     <h:panelGroup id="editDialogContent" layout="block">
        <!-- whatever here to display - e.g. use #{someBean.someValueToBeEdited} -->
     </h:panelGroup>
     <f:facet name="footer">
          <p:commandLink value="save" styleClass="btn btn-info" pt:look="primary" process="editDialog" update="someForm:somePart"
             action="#{someBean.saveEditedValue}" oncomplete="$(PrimeFaces.escapeClientId('someForm:editDialog')).modal('hide');return false;"/>
     </f:facet>
</b:modal>

Please note: do not do the same mistake as me - keep the modal dialog (here 'editDialog') out of the area you would re-render eventually (here 'someForm:somePart'). Otherwise, partial rendering will cause rewriting some part of DOM where Bootstrap had some listeners or whatever - you end up with closed modal dialog but modal-backdrop stil present (this helped me http://stackoverflow.com/a/20109519)

[stephanrauh]

@jbmb Fancy a screenshot? I wonder if we should implement our own confirm dialog. Does the PrimeFaces confirm dialog blend in nicely into the BootsFaces look?

[jbmb]

PrimeFaces do have bootstrap theme which can add similar look. However their markup is completely different and not fitting well into responsive layout (at least my experience). When I run it on mobile device, their dialog was not scrollable at all. Not sure about implementing own confirm dialog - seems to me that <b:modal> already offers what is necessary. But maybe others would be of different meaning... I can't provide screenshot at the moment - but its nothing special, simple dialog with one 'save' button.

[ahofmeister]

@jbmb Well, your example is not working for me. Can you please provide a minimal working example? I got an NPE after fixing the form-issue (you mentioned). Just provide an example, with <h:form>. It will maybe help other people, too.

@stephanrauh You don't need to implement a own confirm dialog in my opinion. As @jbmb pointed out, <b:modal> should be used for this. Maybe there is still improvement necessary, I really do not know.

[jbmb]

@AlexanderBl4h check this up:

        <h:form id="form">
            <div>
                <h:outputText id="outputText" value="Current text value: #{bean.text}"/>
            </div>
            <b:modal id="dialog">
                <h:panelGroup id="dialogContent" layout="block">
                    Current value of text is: #{bean.text}. Button click will set it to '123456'
                </h:panelGroup>
                <f:facet name="footer">
                    <p:commandButton value="change text" action="#{bean.setText('123456')}" update="outputText"
                                     oncomplete="$('#form\\:dialog')).modal('hide');return false;"/>
                </f:facet>
            </b:modal>

            <p:commandLink id="dialogLink" value="Invoke modal" update="dialogContent outputText" process="@this" oncomplete="$('#form\\:dialog').modal();return false;">
                <f:setPropertyActionListener target="#{bean.text}" value="abcde"/>
            </p:commandLink>
        </h:form>

Just create viewscoped bean 'bean' and one String property 'text'. I had to use PrimeFaces commandLink/CommandButton, because there is the oncomplete attribute that will fire javascript when ajax is finished

[ahofmeister]

Thanks my friend. Few minor changes:

• <b:modal> need a title, otherwise a NPE is raising up.
• Replace <p:commandLink> with the <b:commandButton>
• change the attribute onComplete to onClick

It does work nicely! Good workaround, but still an issue.

[jbmb]

@AlexanderBl4h In my case, no title is necessary for <b:modal> - I am using Mojarra and latest BootsFaces snapshot.

I haven't tried onClick event, but I doubt this would work properly - you need to show the modal after partial ajax update is done not to show the old content to the user. That's why <p:commandLink> has been used.

[tdupard]

Same issue for but with p:dialog instead of p:confirm. No invocation. If this functionality is deprecated to the benefit of b:modal I understand, I am just documenting the behavior.

[Coolius70]

I'm facing a strange problem. The modal is working and the intended method is called when pressing ok, but I need to pass the id from the datatable row as parameter.

I extended the on complete method to pop up an alert when called and then store the id. Once I click the Button the pop up comes and afterwards the modal. But: the storeLoadId medthod is called for each table row at page loading and then the bean is giving back the last value stored. I would have expected to be called after the alert.

oncomplete="alert('no');#{workpackageBean.storeLoadId(o.id)};$('.modalPseudoClass').modal();return false;"

Here I store the property explicilty by a method [DEBUG] 16:29:16,583 (WorkpackageBean.java:177) - store 4 [DEBUG] 16:29:16,584 (WorkpackageBean.java:177) - store 5 [DEBUG] 16:29:16,585 (WorkpackageBean.java:177) - store 6 [DEBUG] 16:29:16,586 (WorkpackageBean.java:177) - store 7 [DEBUG] 16:29:16,587 (WorkpackageBean.java:177) - store 8 [DEBUG] 16:29:16,588 (WorkpackageBean.java:177) - store 9 after click on button JSF does read of loadID [DEBUG] 16:29:16,589 (WorkpackageBean.java:283) - '9'

Does anybody has an idea what is going wrong in my code or has a workaround? The Action method of a button is somehow now called when the button is in a table, so this is also not a workaround.

    <b:jumbotron>
        <b:panel title="Übersicht Arbeitspakete" look="primary" collapsible="false">
            <b:dataTable id="dataTable" value="#{employerOverviewBean.overviewList}" var="o">
                <b:dataTableColumn label="Titel" value="#{o.title}" />
                <b:dataTableColumn label="Status" value="#{o.status}" />
                <b:dataTableColumn label="Kandidaten" value="#{o.matches}" />
                <b:dataTableColumn label="Bewerbungen" value="#{o.responses}" />
                <b:dataTableColumn label="Bearbeiten">
                    <h:form>
                        <b:navLink outcome="workpackageDetails" value="" icon="pencil">
                            <f:param name="workpackageId" value="#{o.id}" />
                        </b:navLink>
                    </h:form>
                </b:dataTableColumn>
                <b:dataTableColumn label="Löschen">
                    <h:form>
                        <b:commandButton look="link" icon="trash" ajax="true" update="@form:secondForm" 
                            oncomplete="alert('no');#{workpackageBean.storeLoadId(o.id)};$('.modalPseudoClass').modal();return false;" >
                        </b:commandButton>
                    </h:form>
                </b:dataTableColumn>
            </b:dataTable>
        </b:panel>
    </b:jumbotron>

    <b:modal id="modalDialogID" styleClass="modalPseudoClass"
        title="Wollen Sie das Arbeitspaket #{workpackageBean.loadId} wirklich löschen?">
        <h:form id="secondForm">
            <b:panelGrid columns="6">
                <b:commandButton look="success" icon="ok" value="Ja" action="workpackageBean.delete(o.id)}" ajax="true"
                    update=":dataTable" oncomplete="$('.modalPseudoClass').modal('hide');return false;" >
                    </b:commandButton>
                <b:commandButton look="danger" icon="remove" value="Nein" />
            </b:panelGrid>
        </h:form>
    </b:modal>

[stephanrauh]

@Coolius70 Please test your code again with BootsFaces-1.0.1. Until recently, the datatable didn't support the var attribute properly. Now it should work better.

[stephanrauh]

As for the original topic: the confirm dialog isn't triggered because that's a PrimeFaces feature. This is exhibited by the "p:" prefix of the component nested in {b|p}:command{Button|Link}. We might add a similar feature. Let me ponder about it a while: confirm dialogs and alert boxes aren't as popular as they used to be, so maybe the approach using b:modal, as suggested by @jbmb, @tdupard, @XaeroDegreaz, and @Coolius70 may be good enough.

Please report back if you'd like to add to the discussion. I'm going to close this issue, but that doesn't mean we don't listen to it. We do!

[ahofmeister]

@stephanrauh I am refering to the comment: jbmb commented on 28 Jul 2015

I just made minor changes (as pointed out in the next comment). It does work for me very well. If you don't want to support primefaces here. I can fully understand this. As for me, the issued has beend fixed by the provided workaround. :)

[Coolius70]

So far it looks good for me. I had to workaround anyhow because I did not find out how to pass parameter to modal, so I can go now easy via an outcome link that works, but calling modal direytly works now

[lfparedes2]

How to validate the fields of a b: dialog without closing help please

[ggam]

@lfparedes2 could you please create a new issue for your question?

[ufukseyhan]

confirm dialogs and alert boxes aren't as popular as they used to be, so maybe the approach using b:modal

Right, but Primefaces's "global confirm" is a perfect feature you should also provide.