Update bean property while using actionListener

Question

I have a dialog in a form. The dialog has an inputTextarea and a commandButton. The commandButton uses actionListener to call a method on the bean. My issue is that the data in the inputTextarea is not available to my actionListener's method. The comments field shown below is null on the bean. How can I get access to it's contents in my bean's method?

The Page:

<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html"
            xmlns:f="http://java.sun.com/jsf/core" xmlns:c="http://java.sun.com/jsp/jstl/core"
            xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:p="http://primefaces.org/ui"
            template="/common/template.xhtml">
<ui:define name="title">test</ui:define>
<ui:define name="head">
    <h:outputStylesheet name="web0020.css" library="css"/>
</ui:define>
<ui:define name="content">
    <p:panel id="fileUploads" header="File Uploads" style="margin-bottom:20px">
        <h:form id="form">
            <p:messages id="messages" showDetail="false" closable="true">
                <p:autoUpdate/>
            </p:messages>
            <p:dialog header="Approve" widgetVar="approveDlg" modal="true" appendTo="@(body)">
                <p:panelGrid columns="1" layout="grid" styleClass="ui-noborder">
                    <h:outputText value="Approve Submission" style="font-weight:bold;font-size:1.3em"/>
                    <p:outputLabel for="comments" value="Comments:" style="font-weight:bold"/>
                    <p:inputTextarea id="comments" value="#{testView.comments}"
                                     rows="1" cols="100"/>
                    <p:commandButton value="Save"
                                     actionListener="#{testView.approve()}"
                                     icon="ui-icon-check" update=":form:messages"/>
                </p:panelGrid>
            </p:dialog>
            <p:commandButton value="Approve" onclick="PF('approveDlg').show();" icon="fa fa-thumbs-up"
                             update=":form:messages"/>
        </h:form>
    </p:panel>
</ui:define>
</ui:composition>

@Named
@ViewScoped
public class TestView implements Serializable{
    @SuppressWarnings("compatibility:1287963775427900593")
    private static final long serialVersionUID = 1L;
    
    public TestView() {
        super();
    }
    private String comments;
    
    public void approve() {
        try {
        System.out.println("Comment:" + comments); //THIS IS EMPTY

        } catch (Exception e) {
            FacesContext.getCurrentInstance()
                .addMessage(null,
                            new FacesMessage(FacesMessage.SEVERITY_ERROR, "Error! " + e.getMessage(), e.getMessage()));

        }
    }

    public void setComments(String comments) {
        this.comments = comments;
    }

    public String getComments() {
        return comments;
    }
}

Hmm it submits the whole form so the InputTextArea contents should be in there. What happens if you move the h:form from outside the dialog to inside the dialog? — Melloware, Oct 06 '20 at 17:47
I moved the form inside the dialog and it worked! Not sure how to proceed though as I need to reference other items outside the dialog such as messages. Why did that work? — Sam Donato, Oct 06 '20 at 18:56
another update, if I remove appendTo="@(body)" on the dialog, it works too. I had to add that because when the dialog opened, it made the whole page modal, including the dialog. — Sam Donato, Oct 06 '20 at 19:01
It is a prime faces thing. I have to append to body in order to make a dialog modal and it has to have it's own form inside the dialog to work. — Sam Donato, Oct 06 '20 at 20:06

score 1 · Answer 1 · answered Oct 06 '20 at 20:08

Answered with this - Primefaces dialog with modal=true not working properly. In order to make a modal form, you have to use appendTo="@(body)" and if you use appendTo, you will be outside the page's form, so you have to embed a separate form (outside of the main page's form) inside your dialog

Update bean property while using actionListener

1 Answers1