CODEWITHSUNDEEP
jsfdatatable
user1625222
user1625222

Reputation: 1

JSF Datatable - Editing Multiple InputText Boxes

I currently have a datatable that displays data from my database. I'm trying to add a way for users to edit the current row of the datatable (inside the datatable itself, without having a external form or button) and then submit that to the backing bean which then updates the DB.

I have some conditional rendering which allows a user to press an edit button on a specific row and that changes the output text to inputtext boxes for them to edit.

General look:

inputText1 inputText2 inputText3 (Save Button)

The issue I'm having is that unless the user manually hits return on each of the inputText the values are not updated in the bean. The save button does not seem to do anything other than call the database update method, but with the original (non-updated) data from the table. I've been working on this for hours and can't seem to make any progress.

If anyone could point me in the right direction I'd be much obliged. Essentially what I want is a button in each row (save) that will capture the values the user has typed into the boxes.

Example code:

<h:dataTable id="dt1" value="#{Results.players}" var= "item" bgcolor="#F1F1F1" border="10" cellpadding="5" cellspacing="3">
    <h:column>
        <f:facet name="header"><h:outputText value="ID"/></f:facet>
        <h:outputText value="#{item.id}"/>
    </h:column>
    <h:column>
        <f:facet name="header">
            <h:outputText value="Name"/>
        </f:facet>
        <h:outputText value="#{item.name}" rendered="#{not item.editable}"/>
        <h:form>
            <h:inputText value="#{Results.currentName}" rendered="#{item.editable}" immediate="true"/> 
        </h:form>
    </h:column>
    <h:column>
        <f:facet name="header">
            <h:outputText value="Department"/>
        </f:facet>
        <h:outputText value="#{item.department}" rendered="#{not item.editable}"/>
        <h:inputText value="#{Results.currentDepartment}" rendered="#{item.editable}" immediate="true"/> 
    </h:column>

And the buttons. The edit will show normally, and when clicked the Save button will show and the row will render as inputtext.

<h:column>
    <f:facet name="header">
        <h:outputText value="Edit"/>
    </f:facet>
    <h:form>
        <h:commandLink value="Edit" rendered="#{not item.editable}" action="#{Results.editPlayers(item)}"/>
        <h:commandLink value="Save" rendered="#{item.editable}" action="#{DBupdate.updatePlayers(item)}"/>
    </h:form>
</h:column>

Upvotes: 0

Views: 2149

Answers (1)

Manu Navarro
Manu Navarro

Reputation: 740

One problem more normal in these cases is to not update the screen fields, one way to force jsf update the fields is as follows:

<h:commandLink ..>
    <f:ajax event="click" render="@all" execute="@this" />
</h:commandLink>

Or

<h:commandLink ..>
    <f:ajax render="@all" execute="@form" />
</h:commandLink>

Regards,

Upvotes: 0

Related Questions