CODEWITHSUNDEEP
javajsfjsf-2
Peter Penzov
Peter Penzov

Reputation: 1606

Cannot edit table row with AJAX

I have this JSF table which is used to display data. I want to use AJAX to update the rows of the table.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"   
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      >
    <h:head>
        <h:outputStylesheet library="css" name="table-style.css"  />
    </h:head>
    <h:body>

        <h1>JSF 2 dataTable example</h1>
        <h:form>
            <h:dataTable id="ajaxtable" 
                        value="#{order.orderModel}" var="o"
                styleClass="order-table"
                headerClass="order-table-header"
                rowClasses="order-table-odd-row,order-table-even-row">

                        <h:column>

                    <f:facet name="header">No</f:facet>

                    <h:inputText rendered="false"/>

                    <h:outputText value="#{order.orderModel.rowIndex + 1}"  />

                </h:column>
                <h:column>

                    <f:facet name="header">Order No</f:facet>

                    <h:inputText value="#{o.orderNo}" size="10" rendered="#{o.editable}" />

                    <h:outputText value="#{o.orderNo}" rendered="#{not o.editable}" />

                </h:column>

                <h:column>

                    <f:facet name="header">Product Name</f:facet>

                    <h:inputText value="#{o.productName}" size="20" rendered="#{o.editable}" />

                    <h:outputText value="#{o.productName}" rendered="#{not o.editable}" />

                </h:column>

                <h:column>

                    <f:facet name="header">Price</f:facet>

                    <h:inputText value="#{o.price}" size="10" rendered="#{o.editable}" />

                    <h:outputText value="#{o.price}" rendered="#{not o.editable}" />

                </h:column>

                <h:column>

                    <f:facet name="header">Quantity</f:facet>

                    <h:inputText value="#{o.qty}" size="5" rendered="#{o.editable}" />

                    <h:outputText value="#{o.qty}" rendered="#{not o.editable}" />

                </h:column>

                <h:column>

                    <f:facet name="header">Action</f:facet>

                    <h:commandLink id="editlink" value="Edit" action="#{order.editAction(o)}" rendered="#{not o.editable}">
                                    <f:ajax execute="@this" render="editlink"/>
                                </h:commandLink>

                </h:column>

            </h:dataTable>

            <h:commandButton value="Save Changes" action="#{order.saveAction}">
                    <f:ajax execute="@this" render="ajaxtable"/>
                </h:commandButton>


        </h:form>
    </h:body>

</html>

When I pres this button(link) the row of the table is not updated.

    <h:commandLink id="editlink" value="Edit" action="#{order.editAction(o)}" rendered="#{not o.editable}">
          <f:ajax execute="@this" render="editlink"/>
    </h:commandLink>

I suspect that AJAX cannot be used when I have links.

And the second problem is this:

            <h:column>

                <f:facet name="header">No</f:facet>

                <h:inputText rendered="false"/>

                <h:outputText value="#{order.orderModel.rowIndex + 1}"  />

            </h:column>

If I remove inputText I get this error: Index: 0, Size: 0. Should I left this?

Best wishes

Upvotes: 0

Views: 816

Answers (1)

BalusC
BalusC

Reputation: 1108782

The mistake is in the render attribute of the ajax link in question:

<h:commandLink id="editlink" ...>
    <f:ajax execute="@this" render="editlink" />
</h:commandLink>

You're telling it to render only the edit link itself. You're basically doing the same as render="@this". You are not telling it to render the table. You need to tell it to render the table.

First give the <h:form> a fixed id so that you can specify a fixed client ID later in the render.

<h:form id="form">

Then fix the ajax link as follows to tell it to render the table:

<h:commandLink id="editlink" ...>
    <f:ajax execute="@this" render=":form:ajaxtable" />
</h:commandLink>

An alternative is to bind the table to the view so that you can get its client ID dynamically:

<h:dataTable binding="#{table}" ...>

with

<h:commandLink id="editlink" ...>
    <f:ajax execute="@this" render=":#{table.clientId}" />
</h:commandLink>

(this way you can also show row number by #{table.rowIndex} without the need for a DataModel)

See also:

Upvotes: 1

Related Questions