Question

I have a datatable which loops through a List and has a value column which renders as such:

<h:dataTable var="assessmentFieldValue" value="#{assessmentBean.assessmentFieldValues}">
    ...
    <ui:fragment rendered="#{assessmentFieldValue.field.type eq 'TEXT'}">
        <h:inputText value="#{assessmentFieldValue.value}" />
    </ui:fragment>
    <ui:fragment rendered="#{assessmentFieldValue.field.type eq 'SLIDER'}">
        <component:slider value="#{assessmentFieldValue.value}" />
    </ui:fragment>
    ...
</h:dataTable>

So sometimes I get a standard inputText, sometimes I get my composite slider component:

<composite:interface>
    <composite:attribute name="value" />
</composite:interface>

<composite:implementation>
    <script type="text/ecmascript">
        function updateValue(value) {
            $('##{cc.id} span').each(function() {
                $(this).text(value);
            });
        }
    </script>

    <div id="#{cc.id}">
        <input id="sliderComponent" type="range" min="1" max="10"
                value="#{cc.attrs.value}"
                style="float: left"
                onchange="javascript:updateValue(this.value);" />

        <h:outputText id="fieldValue" value="#{cc.attrs.value}"
                style="min-width: 20px; display: block; float: left" />
    </div>
</composite:implementation>

This all renders as I would like it too (deployed on JBoss-AS7), but when I hit the save button associated with the datatable the assessmentBean.assessmentFieldValue List doesn’t reflect any value changes on the slider component yet it does for the standard inputText.

Can anyone suggest why changes to the slider aren’t making it back to the backing bean? Thanks!

Answer 1

That’s because you used a plain HTML <input> element instead of a fullworthy JSF input component like <h:inputText>. This way the value is in no way bound to the JSF context. It’s only treated as plain vanilla template output value, not as input value. A composite component isn’t going to solve this. You really need to create a fullworthy UIComponent for this (or to look for a 3rd party component library which has already done the nasty job for you, such as PrimeFaces with its <p:slider>).

See also:

• When to use <ui:include>, tag files, composite components and/or custom components?