-1

First time post on stack overflow so apologies if I don't hit the standard expected when asking a question.

We have a JSF page which contains a html table (code below). The table contains 5 columns which needs a response from a user (e.g. picklist, number input etc). The idea is the user selects from a picklist for column id 'condition', and then picks an option for column id 'restored'. If restored is set to yes then we want ajax to be called and enable the final 3 columns 'restored date', 'professionally' and 'restorationCost'.

However what we are finding is that when the user selects their option from 'condition' and then selects yes in 'restored', the final 3 columns will correctly become enabled but the value that was entered in 'condition' is removed and put back to null.

Adding logs to the bean (which has generic getter/setter methods) I can see the value is initially being set but then it's being set again as null following the ajax call. In addition this value is only set to null on the first occasion, if the same steps are repeated either on the same row of the table or on a new row in the table the value persists correctly as we would expect.

A hack solution that works is to add an if query to the set method in the bean to only set the value if the string passed to the method is not null, however this isn't a solution we want to utilise unless it's a last resort.

Can anyone give any help or offer any reasons as to why it is behaving this way? Thanks.

Using Primefaces version 8.0 and the bean is session scoped.

<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://xmlns.jcp.org/jsf/core" xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:p="http://primefaces.org/ui" xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
    <p:outputPanel id="conditions">
        <p>CONDITION AND RESTORATIONS</p>
        <p>Condition value key:</p>
        <ui:repeat var="con" value="#{sessionDataWrapper.sessionData.classicCarDto.conditions}" varStatus="status">
            <br/><h:outputText styleClass="mandatoryText" value="#{con.value} - #{con.name}: #{con.description}"/>
        </ui:repeat>
        <br/>
        <table id="conditionsTable" class="conditionsTable">
            <tr>
                <th></th>
                <th id="conditionHeader" class="tableHeader">CONDITION</th>
                <th id="restoredHeader" class="tableHeader">RESTORED</th>
                <th id="dateHeader" class="tableHeader">DATE</th>
                <th id="professionallyHeader" class="tableHeader">PROFESSIONALLY</th>
                <th id="costHeader" class="tableHeader">COST</th>
            </tr>
            <tbody>
            <ui:repeat id="conditionsTableSub" var="c" value="#{dto.components}" varStatus="status">
                <tr>
                    <td class="tableFieldName">#{c.name}</td>
                    <td>
                        <p:selectOneMenu class="tableDropdown" id="condition" value="#{c.condition}">
                            <f:selectItem itemLabel="Select" itemValue=""/>
                            <f:selectItems value="#{dto.conditions}" var="condition" itemLabel="#{condition.value}" itemValue="#{condition.value}" />
                            <p:ajax event="change" process="@this" />
                        </p:selectOneMenu>  
                    </td>
                    <td>
                        <p:selectOneMenu class="tableDropdown" id="restored" value="#{c.restored}">
                            <f:selectItem itemLabel="Select" itemValue=""/>
                            <f:selectItem itemLabel="Yes" itemValue="true"/>
                            <f:selectItem itemLabel="No" itemValue="false"/>
                            <f:ajax event="change" process="@this" render=":uploadClassicCarForm:conditions"/>
                        </p:selectOneMenu>
                    </td>
                    <td>
                        <p:datePicker styleClass="smallDate" inputStyleClass="smallDateInput" panelStyleClass="smallDatePanel" readonlyInput="true" id="restoredDate" view="month" value="#{c.restorationDate}" pattern="MMM yyyy" 
                                hideOnDateTimeSelect="true" yearNavigator="true" yearRange="#{sessionDataWrapper.sessionData.classicCarDto.getYears()}" placeholder="Month, Year" disabled="#{c.restored eq 'false' or c.restored eq null}">
                            <p:ajax event="dateSelect" process="@this" />
                        </p:datePicker>
                    </td>
                    <td>
                        <p:selectOneMenu class="tableDropdown" id="professionally" value="#{c.professionallyRestored}" disabled="#{c.restored eq 'false' or c.restored eq null}">
                            <f:selectItem itemLabel="Select" itemValue=""/>
                            <f:selectItem itemLabel="Yes" itemValue="true"/>
                            <f:selectItem itemLabel="No" itemValue="false"/>
                            <p:ajax event="change" process="@this" />
                        </p:selectOneMenu>
                    </td>
                    <td>
                        <p:inputNumber class="tableNumber" id="restorationCost" minValue="0" maxValue="999999999" value="#{c.restorationCost}" symbol="£ " emptyValue="focus" decimalPlaces="0" 
                            placeholder="£ " disabled="#{c.restored eq 'false' or c.restored eq null}">
                            <p:ajax event="change" />
                        </p:inputNumber>
                    </td>
                </tr>
            </ui:repeat>
            </tbody>
        </table>
</p:outputPanel>

kuytsce
  • 23
  • 4
  • Primefaces version? Have you tried with p:ajax, updating the last three columns? Try to look at this [question](https://stackoverflow.com/questions/25339056/understanding-primefaces-process-update-and-jsf-fajax-execute-render-attributes), for more info. – WoAiNii Jun 12 '20 at 15:56
  • And is your back bean RequestScoped? – Melloware Jun 12 '20 at 18:03
  • Please provide a [mcve] that includes: a short description of the error and which actions cause it, the relevant xhtml code (the select input), and also the relevant pieces of code of the bean. if you have trouble with how to ask a question look at other examples :) – fuggerjaki61 Jun 13 '20 at 07:20
  • We're using primefaces version 8.0 and the back bean is SessionScoped. Thanks and I've added this info to the main question. – kuytsce Jun 15 '20 at 07:17
  • We have tried using update but the same issue persists. Reading some other questions I feel it may be linked to the ui:repeat. Going to try removing that to see if the bug remains or not – kuytsce Jun 15 '20 at 07:22
  • 1
    Yes please remove things.. also the composition, table, outputpanel etc... make it a real [mcve] – Kukeltje Jun 15 '20 at 07:29
  • I thought the table and the outputpanel would be important to include as ajax updates the outputpanel and the bug is within the table? – kuytsce Jun 15 '20 at 08:23

1 Answers1

0

I noticed you have this in your code:

<p:selectOneMenu class="tableDropdown" id="restored" value="#{c.restored}">
    <f:selectItem itemLabel="Select" itemValue=""/>
    <f:selectItem itemLabel="Yes" itemValue="true"/>
    <f:selectItem itemLabel="No" itemValue="false"/>
    <f:ajax event="change" process="@this" render=":uploadClassicCarForm:conditions"/>
</p:selectOneMenu>

The

<f:ajax event="change" process="@this" render=":uploadClassicCarForm:conditions"/>

in there is 'wrong' in several ways.

  1. It is better to use a p:ajax inside PrimeFaces components
  2. The attributes are a mix of p:ajax and f:ajax
    • f:ajax: does not have process attrubute but an execute
    • p:ajax: does not have a render attribute but an update

So it seems a mix. Not sure if it is (part of) the cause but wrong never the less

Kukeltje
  • 11,924
  • 4
  • 19
  • 44
  • Thanks, I just updated to use **p:ajax** and the **update** attribute. The issue is still happening but slightly differently. Instead of just the 'condition' value being reset to null, the 'restored' value is also now going to null. Again like before this is only on the first occasion, once it's happened once it never happens again during the session on any of the table rows. – kuytsce Jun 15 '20 at 08:29
  • We have found a working solution. changing all to use p:ajax didn't work as per the above comment however changing all to f:ajax fixed the issue and it now works as expected. – kuytsce Jun 15 '20 at 12:11
  • Then create an answer with details... Would love to see the differences and maybe find out why your change works – Kukeltje Jun 15 '20 at 12:40