2 Replies Latest reply on Sep 30, 2013 12:18 PM by Eelse

    Editable table (clientside) validation bug?

    Eelse

      Hi,

       

      I have this disturbingly annoying bug which I hope somebody can help me with.

       

      Using JDeveloper 11.1.1.7.0 and Business Components, I have a page which displays an editable table (based on a BC ViewObject) with CreateInsert, Commit and Rollback buttons - mapped to bindings Actions - above. In the viewobject, some of the attributes are mandatory and the required clause for the input fields in the table is mapped to the VO attribute mandatory value. No excplicit values for autosubmit and immediate are set on the input components, all the buttons have partialSubmit set to true and the Rollback button has immediate set to false.

       

      Now the thing is, when I create a new row using the CreateInsert button and then press Commit without setting any values, the validations fire as expected - each missing required attribute gets errormarked and a errorbox is displayed near a missing value pointing out some required values are missing. However, it is then impossible to put any value in any of the attributes on the table because as soon as I start typing some value in a field, the (clientside) validation seems to be firing again, causing the value I just entered to be selected and so anything I put in afterwards is overwriting the previous value. As this fires after each character entered, setting a new value anywhere is impossible, and the only means to bypass this is by pressing the Rollback button, removing the new row, and the creating a new row again then entering all required values before committing.

       

      Anybody any ideas on how to prevent/fix this? Anything is welcome, and thanks in advance.

       

      EDIT: For completeness, I should add that I am working on Internet Explorer 9, though there are definitely issues with this situation in Chrome too.

       

      Regards,

      Eelse

        • 2. Re: Editable table (clientside) validation bug?
          Eelse

          Hi Frank,

           

          Thanks for the input. The suggested javascript fix work a little too well though; after the Commit button, the required validations fail but the error messages are not shown at all. I think this is because the focus is 'automagically' set on one of the invalid fields (removing all of the error messages). So the validations fire as expected, only the errors get removed instantaniously. I've tried being more specific (ie. clearing only the components' error messages using AdfPage.PAGE.clearMessages(componentId)) but since the focussing of the field(s) keeps going on repetitively, the result is no better.

           

          For clarity, this is my editable table (inside panelCollection):

           

          1.   <af:table value="#{bindings.ControleDefinitieAdminView.collectionModel}"
          2.                 var="row"
          3.                 rows="#{bindings.ControleDefinitieAdminView.rangeSize}"
          4.                 emptyText="#{adminBundle.LABEL_ADMIN_TABLE_NO_RESULTS}"
          5.                 fetchSize="#{bindings.ControleDefinitieAdminView.rangeSize}"
          6.                 rowBandingInterval="0" columnStretching="column:c4" autoHeightRows="0"
          7.                 filterModel="#{bindings.ControleDefinitieAdminViewQuery.queryDescriptor}"
          8.                 filterVisible="true"
          9.                 queryListener="#{bindings.ControleDefinitieAdminViewQuery.processQuery}"
          10.                 partialTriggers="::ctb3 ::ctb1 ::ctb2 ::sbc1"
          11.                 contextMenuSelect="false" contentDelivery="whenAvailable" varStatus="vs" id="t1">
          12.         <af:column sortProperty="#{bindings.ControleDefinitieAdminView.hints.Code.name}"
          13.                    filterable="true" sortable="true"  width="60"
          14.                    headerText="#{controledefinitieBundle.LABEL_FIELD_CODE}"
          15.                    id="c2">
          16.           <af:inputText value="#{row.bindings.Code.inputValue}"
          17.                         label="#{controledefinitieBundle.LABEL_FIELD_CODE}"
          18.                         required="true"
          19.                         columns="#{bindings.ControleDefinitieAdminView.hints.Code.displayWidth}"
          20.                         maximumLength="#{bindings.ControleDefinitieAdminView.hints.Code.precision}"
          21.                         shortDesc="#{bindings.ControleDefinitieAdminView.hints.Code.tooltip}"
          22.                         id="it1">
          23.             <f:validator binding="#{row.bindings.Code.validator}"/>
          24.           </af:inputText>
          25.         </af:column>
          26.         <af:column sortProperty="#{bindings.ControleDefinitieAdminView.hints.Controle.name}"
          27.                    filterable="true" sortable="true"  width="250" minimumWidth="125"
          28.                    headerText="#{controledefinitieBundle.LABEL_FIELD_CONTROLE}"
          29.                    id="c5">
          30.           <af:inputText value="#{row.bindings.Controle.inputValue}"
          31.                         label="#{controledefinitieBundle.LABEL_FIELD_CONTROLE}"
          32.                         required="true"
          33.                         columns="#{bindings.ControleDefinitieAdminView.hints.Controle.displayWidth}"
          34.                         maximumLength="#{bindings.ControleDefinitieAdminView.hints.Controle.precision}"
          35.                         shortDesc="#{bindings.ControleDefinitieAdminView.hints.Controle.tooltip}"
          36.                         id="it3">
          37.             <f:validator binding="#{row.bindings.Controle.validator}"/>
          38.           </af:inputText>
          39.         </af:column>
          40.         <af:column sortProperty="#{bindings.ControleDefinitieAdminView.hints.Opschortingsgrond.name}"
          41.                    filterable="true" sortable="true" minimumWidth="125" width="250"
          42.                     headerText="#{controledefinitieBundle.LABEL_FIELD_OPSCHORTINGSGROND}"
          43.                    id="c4">
          44.           <af:inputText value="#{row.bindings.Opschortingsgrond.inputValue}"
          45.                         label="#{controledefinitieBundle.LABEL_FIELD_OPSCHORTINGSGROND}"
          46.                         required="#{bindings.ControleDefinitieAdminView.hints.Opschortingsgrond.mandatory}"
          47.                         columns="#{bindings.ControleDefinitieAdminView.hints.Opschortingsgrond.displayWidth}"
          48.                         maximumLength="#{bindings.ControleDefinitieAdminView.hints.Opschortingsgrond.precision}"
          49.                         shortDesc="#{bindings.ControleDefinitieAdminView.hints.Opschortingsgrond.tooltip}"
          50.                         id="it2">
          51.             <f:validator binding="#{row.bindings.Opschortingsgrond.validator}"/>
          52.           </af:inputText>
          53.         </af:column>
          54.         <af:column sortProperty="#{bindings.ControleDefinitieAdminView.hints.IngangDtm.name}"
          55.                    filterable="false" sortable="true"
          56.                    headerText="#{controledefinitieBundle.LABEL_FIELD_DATUM_INGANG}"
          57.                    id="c1">
          58.           <af:inputDate value="#{row.bindings.IngangDtm.inputValue}"
          59.                         label="#{controledefinitieBundle.LABEL_FIELD_DATUM_INGANG}"
          60.                         required="true"
          61.                         shortDesc="#{bindings.ControleDefinitieAdminView.hints.IngangDtm.tooltip}"
          62.                         id="id1">
          63.             <f:validator binding="#{row.bindings.IngangDtm.validator}"/>
          64.             <af:convertDateTime pattern="#{wfmBundle.DEFAULT_DATE_FORMAT}"/>
          65.           </af:inputDate>
          66.         </af:column>
          67.         <af:column sortProperty="#{bindings.ControleDefinitieAdminView.hints.EindDtm.name}"
          68.                    filterable="false" sortable="true"
          69.                    headerText="#{controledefinitieBundle.LABEL_FIELD_DATUM_EINDE}"
          70.                    id="c3">
          71.           <af:inputDate value="#{row.bindings.EindDtm.inputValue}"
          72.                         label="#{controledefinitieBundle.LABEL_FIELD_DATUM_EINDE}"
          73.                         required="#{bindings.ControleDefinitieAdminView.hints.EindDtm.mandatory}"
          74.                         shortDesc="#{bindings.ControleDefinitieAdminView.hints.EindDtm.tooltip}"
          75.                         id="id2">
          76.             <f:validator binding="#{row.bindings.EindDtm.validator}"/>
          77.             <af:convertDateTime pattern="#{wfmBundle.DEFAULT_DATE_FORMAT}"/>
          78.           </af:inputDate>
          79.         </af:column>
          80.       </af:table>

           

          The Commit/Rollback buttons:

           

          1. <af:commandToolbarButton actionListener="#{bindings.Commit.execute}"
          2.                                          id="ctb1"
          3.                                         textAndAccessKey="#{adminBundle.LABEL_BUTTON_SAVE}"
          4.                                        partialSubmit="true"/>
          5. <af:commandToolbarButton actionListener="#{bindings.Rollback.execute}"
          6.                                         immediate="true" id="ctb2"
          7.                                         textAndAccessKey="#{adminBundle.LABEL_BUTTON_CANCEL}"
          8.                                        partialSubmit="true">
          9.      <af:resetActionListener/>
          10. </af:commandToolbarButton>

           

          Regards,

          Eelse