Update Bean Property of a <rich:dataTable> using JavaScript in JSF

Question

I have a <rich:dataTable> and want to update the bean property with 'onclick' using JavaScript . Please Find the tried posted code,

JSF Code

<rich:dataTable value="#{myBean.beanList}"
                rowIndex="rowIndex"
                var="beanName">
<facet name="header">
<rich:column>
<h:outputText value="Sample Header"/>
</rich:column>
</facet>

<rich:column>
<a4j:commandLink value="Apple" 
      onclick="modifyScript(#{beanName.booleanProperty})"> <%--Calling modifyScript--%>
<a4j:jsFunction name="jsFunction">
<a4j:actionparam name="actionParam"      
     assignTo="#{beanName.booleanProperty}"/>
</a4j:jsFunction>
</a4j:commandLink>
</rich:column>
</rich:dataTable>

JavaScript

function modifyScript(booleanProperty)
{
   booleanProperty = !booleanProperty;    <%--Modifying the bean property--%>
   historyAllocatedFunction(booleanProperty); <%--Calling the JS Function to assign the updated bean property--%>
}

I strictly do not want to use action and oncomplete attributes of <a4j:commandLink> , because I do not want to call the server for updating the bean property .

The above code is not working fine, everytime it is taking the LastIndex of the <rich:dataTable> .

Help me in accessing the list based on the rowIndex .

Answer 1

You can assign the bean property beanName.booleanProperty to a hidden input. Like this

<rich:column>
    <a4j:commandLink value="Apple" onclick="modifyScript(#{rowIndex})"></a4j:commandLink>
    <h:inputHidden value="#{beanName.booleanProperty}" id = "hiddenInput"></h:inputHidden>
</rich:column>

Then using JS, you change the value of the hidden input. When the form is submitted, the hidden input will be assigned to server side bean property.

Javascript

function modifyScript(index)
{
   $j("#formId\\:tableId\\:hiddenInput\\:" + index).value('<new-value>');
}