Dirty Checks: JSF + Primefaces application?

Question

I have web application in which I am using JSF + Primefaces for UI. I am facing difficulty in applying dirty checks on web pages specially when working with AJAX calls like AJAX call on rowSelect event of datatable.

Following is the exact scenario in which I want to apply dirty checks with AJAX call. Following are the components which I am using in my web page.

1) I have one dataTable which is populated by bean named 'companyBean' (Having attributes for companies)

<p:dataTable id="basic" var="company" value="#{companyInfoBean.companyList}" 
    rowKey="#{company.id}"
    selection="#{companyInfoBean.selectedCompany}" selectionMode="single">

    <p:ajax event="rowSelect" update=":customerDataForm:customerDataFields" />

    <p:column id="modelHeader">
        <f:facet name="header">
            <h:outputText value="Company Name" />
        </f:facet>
        <h:outputText value="#{company.companyName}" />
    </p:column>
      more columns....
</p:dataTable>

As depicted above on row selected (AJAX Call) I update the values in the form on the bottom of the page

<h:form id="customerDataForm">
<p:panel id="customerDataFields">
<p:panelGrid >
<p:row>
    <p:column>
        <h:outputLabel for="companyname" value="Company Name " />
    </p:column>
    <p:column>
        <p:inputText id="companyname" value="#{companyInfoBean.selectedCompany.companyName}" label="Company Name" />
    </p:column>
         more columns...
  <p:row>
    <p:column colspan="2" style="text-align:right">
        <p:commandButton value="Save" actionListener="#{companyInfoBean.updateCompany}" 
        update=":customerDataForm:customerDataTable"/>
    </p:column>
    <p:column colspan="2" style="text-align:left">
        <p:commandButton value="Undo" />
    </p:column>
</p:row>

In above form user can Edit the values that is updated on the rowSelect on datatable.

Now I want a dirty check on the form on the rowSelection on the datatable i.e. if there are some unsaved changes on form that user used be prompted in spite of execution of AJAX call of rowSelect..

Basically what I can understand from this scenario.. that I need some conditional based AJAX calls rather then straightforward. Or I have to use some jQuery stuff to get dirty checks implemented.

velo velo · Accepted Answer · 2012-09-19T20:01:28

There are different ways you can implement this. Here are a few (I would prefer Method 3 if popup's are OK):

Method 1:

a) Use a copy of selectedCompany eg, editCompanyBean as the backing bean for customerDataFields.
b) Add a "listener" to the ajax event this can check the editCompanyBean for null values before setting this with selectedCompany's values. If this fails you can growl a message and block the copy. Note: You can use an override switch to override (b)
c) On save of editCompanyBean initialize it to null values for fields.

Method 2:

a) In the set statement for selectedCompany check if the bean already has a value populated. Throw a warning message if its populated and skip edit.
b) Have the user click save or reset on customerDataFields before proceeding.
Note: Clear selectedCompany after each save or reset of customerDataFields

Method 3:

a) Put customerDataFields in a modal popup dialog. Set it up so that the user has to save or reset before proceeding.
b) The ajax event will popup the above modal dialog. You can use a button to popup as well.

Dirty Checks: JSF + Primefaces application?

1 Answers

Method 1:

Method 2:

Method 3: