How to Update JSF datatable using ajax

Question

I m dynamically adding input text using datatable by pressing command button,but each time row is added page gets refreshed how i can add a row in datatable without refreshing the page using ajax. Here is the code

<h:form>

    <h:dataTable id="table" value="#{dataTableBean.cities}" var="city">
        <h:column>
            <f:facet name="header">
                <h:outputText value="City name" />
            </f:facet>
            <h:inputText value="#{city}" />
        </h:column>
    </h:dataTable>

    <h:commandButton value="Add one more city" id="ajax" update="table"
        actionListener="#{dataTableBean.enlargeList}" />
    <h:commandButton value="Submit" actionListener="#{dataTableBean.processList}" />
</h:form>

You are confusing Primefaces UI components (**p**) and standard JSF components (**h**). Check out documentation of both command buttons, spot the difference, and get back if you have further questions. — skuntsel, Mar 02 '13 at 08:25
Also, be sure to *understand* the difference between **action** and **action listener**, as described, for example, in this excellent answer: [Differences between action and actionListener](http://stackoverflow.com/questions/3909267/differences-between-action-and-actionlistener/3909382#3909382). — skuntsel, Mar 02 '13 at 09:00

score 1 · Answer 1 · edited May 23 '17 at 12:10

As far as it is supposed to be a working excercise, posting anything close to an answer will damage the OP's understanding of the subject.

So, I will give some hints so that OP could solve the problem on his own.

You are confusing Primefaces UI components, whose tags start with <p:...> and standard JSF UI components <h:...>. Regarding your example, there is <h:commandButton> and <p:commandButton>. As far as Primefaces components were designed to provide user with a more convenient interface, there are some additional attributes in the Primefaces counterpart to the standard command button. Spot them and pay attention to the AJAX specification. Take a closer look at ajax and update attributes.
<f:ajax> tag enables ajax behaviour for UIComponents implementing the ClientBehaviorHolder interface. Similarly, <p:ajax> tag does basically the same with some enhancements and is used by Primefaces components. These tags can be bested, for example, within <h:commandButton>/<p:commandButton> and specify ajax behaviour of that component. Pay attention to execute/render attributes of <f:ajax> and/or process/update attributes of <p:ajax>. This way the command button wouldn't fire a standard form submit, but will trigger an AJAX call.
Be sure to understand the difference between action and action listener of command buttons. The latter is designed to execute some minor adjustments (logging/accessing attributes of caller/tuning some properties, etc.), while the former is used to execute a business action (save/delete/update, etc.). Excellent start is reading Differences between action and actionListener.

In the end, be sure not to confuse input and output components within your code.

Finally, consulting a good source of information is a very good idea. You can start with official documentation (Primefaces documentation, Oracle's tutorial on Java EE 6) and then carry on with reliable sources of information. My personal preferences go to the following (brilliant) sources: BalusC tutorials on Java EE in general and JSF in particular, Marty Hall's tutorials on a wide spectrum of subjects within Java and Mkyong's tutorials, covering concrete problems within Java EE, in case you want a concrete example.

How to Update JSF datatable using ajax

1 Answers1