Editable datatable field validation when using datascroller pagination

Question

Hi,
Im using tomahawk-1.1.8 and myfaces-api-1.2.6 I have an editable datatable with each rows having the following set of fields
selectBooleanCheckBox , three selectOneMenus , three outputTexts, three inputTexts
There will be close to 200 rows in the table so im using t:dataScroller to paginate the datatable.
The following are my requirements
1     All elements of the form except the selectBooleanCheckbox must be disabled on load of the page.
2     On clicking on the boolean check box the corresponding rows must be enabled.
3     I should be able to extract only the selected row in the bean side to perform some action and finally save it in the database.
4     On submit of the page I should validate the following.
a. at least one check box is selected
b. Whether all the three intputTexts in the row have values and must also verify if they have valid values.
c. Rows which are not selected (using check box) need not be considered for validation
d. if any invalid data is found appropriate error message must be thrown and that particular element should be given the focus
On seeing the requirement I felt it’s better to use Javascript to enable/disable controls and to validate data. Everything works fine if I have all the controls in a single page. But since I have server side pagenation enabled (using datascroller) I’m able to access only the current page form elements from javascript. In shot I’m able to access only the elements which are in the page from where I click on submit.But the user may change data in several pages and finally submit.
     This leads me to a situation where validation can be done using JSF only. I’m ok to do validations in JSF using a custom validator .But certain things like enabling or disabling controls on the form and the onLoad behavior can be coded using javascript only. This is because if I set the values such as disabled=”true” on the jsf inputText tag itself it is taking effect every time I move out and come back to the same page.
I’m new to JSF . Can someone assist me in this. It’s pretty URGENT….
Thanks,
Swami

Answer 1

Hi,
Thanks for your quick response. I tried setting the disabled attribued based on you suggestion . But the enabling/disabling will not be immediate. I will have to go to some other page and come back to the first page to see the change in state.
For eg:
a. I defaulted the 'selected' attribute of bean to 'false' .So all rows loaded in disabled state as expected.
b. Now if i check the check box other dependant fields will not be enabled immediately . I will have to move do different page and come back to current page for seeing the controls in enabled status.
To overcome this problem i wrote some javascript function to set the selected rows elements' disabled property to false. I wrote something like the following for every element in the data row . After this the fields got enabled immediately on selecting check box
document.getElementById("<form name>:<data table name>:"+rowIndex+":<element name1>").disabled=false;
document.getElementById("<form name>:<data table name>:"+rowIndex+":<element nameN>").disabled=false;
But now there is one more problem
1. The page loads with all elements disabled.
2. I click on the select box and javascript enables the controls on the row (in page 1)
3. I change a value in a text box in the enabled row and move to page 2.
4. Come back to page 1 and see the new value of text box not being retained.
5. I change the value in the same text box again and move to page 2 .
6. Come back to page 1 and see the new value getting retained.
After some initial analysis i found that the the change in value of a form element (text box in this example) which is in disabled status will not be updated in the backing bean on page submit i.e the setter methods will not be called for these elements .Though i enabled it using javascript its actuallly still disabled accoring to the bean attributes.
So in step 3 of the above example the setter methods are not getting called since the field is disabled according to bean. On the contrary , in step 5 the setter methods are getting called when moving to page 2 since the state is enabled according to bean.
Problem  2
I have a column containg two elements out of which one can be present based on the value of another selectOneBox in the same row.In the below example based on value of 'type' ,either 'station' or 'period' should be displayed.
I have set display style as none in station assuming that zone should be displayed on page load.
style="display:none" This is causing problem when i navigate accross pages. When i go to a different page and come back then the zone is getting displayed irrespective of the value of type. This is because the page is rendered again with the default values.
<t:column>
<f:facet name="header">
<t:outputText value="type" />
</f:facet>
<h:selectOneMenu
id="type"
value="#{row.typeIndex}"
onchange="fnHideControls('#{rowIndex}'); return false;"  disabled="#{!(row.selected)}">
<f:selectItems
value="#{bean.lstType}" />
</h:selectOneMenu>
</t:column>     
<t:column>
<f:facet name="header">
<t:outputText value="Station/Period" />
</f:facet>
<h:selectOneMenu
id="Station"
value="#{row.stationIndex}"
style="display:none" disabled="#{!(row.selected)}">
<f:selectItems
value="#{bean.lstStation}"  />
</h:selectOneMenu>
<h:selectOneMenu
id="period"
value="#{row.periodIndex}"
disabled="#{!(row.selected)}" >
<f:selectItems
value="#{bean.lstPeriod}" />
</h:selectOneMenu>
</t:column>Can you help me out with both these problems.
Thanks,
Swami.