CODEWITHSUNDEEP
ajaxjsf-2primefacesmanaged-beansession-scope
lv10
lv10

Reputation: 1529

JSF PrimeFaces / Ajax rendering to Datable fails to add items to the list

I am trying to user a form in 'panelGrid' to render values in a dataTable using <f:ajax>. However, when submitting using the <h:commandButton> the values sent are not displayed in the dataTable. I am not getting a stack or any console errors in the browsers.

This is the my xhtml (Simplified):

Product Catalog:

    <p:tabView id="tabView" style="width: 65%" >
            <p:tab id="books" title="Books">
                <p:dataGrid var="book" value="#{saleBean.productList}" columns="3"
                            rows="9" paginator="true" paginatorTemplate="{CurrentPageReport} 
                            {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} 
                            {LastPageLink} {RowsPerPageDropdown}"
                            rowsPerPageTemplate="3,6,9">
                    <h:form id="product" >
                    <p:panel header="#{book.name}" style="text-align: center">


                            <h:panelGrid columns="1" style="width: 65%">

                                <!-- Add Book Images here -->
                                <h:outputText value="#{book.price}"/>

                                <h:outputLabel value="Dct (in dollars): " />
                                <h:inputText id="discount" value="#{saleBean.item.unit_discount}" style="width: 50%" />

                                <p:commandButton value="Add to Cart" update=":dataTableForm:sc" 
                                                 action="#{saleBean.doAddItem}"/>


                            </h:panelGrid>


                    </p:panel>
                    </h:form>          
                </p:dataGrid>
            </p:tab>

            <p:tab id="arts" title="Art / Various">
                <!-- Art Products to be added here -->
            </p:tab>

            <p:tab id="other" title="Other">
                <!-- Various Products to be Added here -->
            </p:tab>

    </p:tabView>


    <hr/>        
    <h1>Shopping Cart</h1>
    <hr/>

    <h:form id="dataTableForm">
    <p:dataTable id="sc" value="#{saleBean.sd}" var="item" style="width: 60%">

        <p:column>
            <f:facet name="header">
                <h:outputText value="Product"/>
            </f:facet>
            <h:outputText value="#{item.product_fk}"/>
        </p:column>
        <p:column>
            <f:facet name="header">
                <h:outputText value="Quantity"/>
            </f:facet>
            <h:outputText value="#{item.quantity}"/>
        </p:column>
        <p:column>
            <f:facet name="header">
                <h:outputText value="Unit Price"/>
            </f:facet>
            <h:outputText value="#{item.unit_Cost}"/>
        </p:column>
        <p:column>
            <f:facet name="header">
                <h:outputText value="Unit Discount"/>
            </f:facet>
            <h:outputText value="#{item.unit_discount}"/>
        </p:column>

    </p:dataTable>
    </h:form>

</h:body>

This the bean (Simplified):

   public String doAddItem()
    {
        item.setUnit_Cost(product.getPrice());        
        item.setProduct_fk(product);
        item.setQuantity(1);
        sd.add(item); 

        return "productCatalog";
    }

Upvotes: 3

Views: 1154

Answers (2)

Alexandre Lavoie
Alexandre Lavoie

Reputation: 8771

According to PrimeFaces documentation :

http://www.primefaces.org/docs/vdl/3.4/primefaces-p/commandButton.html

Your actionListener="#{saleBean.doAddItem}" must use a function corresponding to that :

public void doAddItem(ActionListener event)
{
    // do your stuff
}

To use action here is an example :

action="#{saleBean.doAddItem}"

public String doAddItem(void)
{

    item.setUnit_Cost(product.getPrice());        
    item.setProduct_fk(product);
    item.setQuantity(1);
    sd.add(item); 

    return "productCatalog";
}

Upvotes: 1

Spyros Doulgeridis
Spyros Doulgeridis

Reputation: 426

Try to use only pf components when you can eg p:datatable. Replace the button with a p:commandButton and use process and update instead of f:ajax.

Also maybe it will by better to include the p:datatable in the form too.

Upvotes: 0

Related Questions