JSF component disappears after binding

Question

I defined a custom component and tried to use binding as the following:

<ui:composition ...>
    <div>
        <f:subview>
            <a4j:outputPanel>
                <h:commandButton id="t1" value="test!" />
                ...
            </a4j:outputPanel>
        </f:subview>
    </div>
</ui:composition>

This component works properly until I added a binding attribute like this:

<h:commandButton id="t1" binding="#{foo}" value="test!" onclick="alert('I am #{id:cid(foo)}'); return false;" />

This component doesn't show up, and I can't find the corresponding piece of code for this button.

Anyone knows a fix?

Shoudn't the binding be to a property of a bean like #{bean.prop}? Or did you just leave that detail out? If you actually have it bound to a property can you show the code for the getter and setter? — Eelke, Jun 08 '12 at 17:54
@Eelke Thanks for the reply. I did exactly the same thing as I showed above. It should work as described here: http://illegalargumentexception.blogspot.ca/2009/10/jsf-working-with-component-identifiers.html#componentbindingclientid. — eelpa, Jun 08 '12 at 18:02

BalusC · Accepted Answer · 2012-06-08T18:31:19.007

1

yes, it is used multiple times

There's the cause. The binding should refer an unique reference for the component. Right now you've physically multiple components referring to one and same reference.

I'm not sure what's the concrete functional requirement is, but more than often this approach is unnecessary when you're already inside the JavaScript context. The particular example can then also just be solved as follows:

<h:commandButton id="t1" value="test!" onclick="alert('I am ' + id); return false;" />

The ID of the generated HTML element itself is namely exactly the same as JSF component client ID.

edited Jun 08 '12 at 18:31

answered Jun 08 '12 at 18:14

BalusC

1,082,665
372
3,610
3,555

Thanks. But the original purpose of using binding here is because this component is used in every row of a datatable and the button text is supposed to be updated on click. I tried to identify the component using id but since it is inside a datatable, I do need the client id instead. – eelpa Jun 08 '12 at 18:22
Then the example in my answer still applies, or better, `onclick="value='updated!'; return false;"`. – BalusC Jun 08 '12 at 18:27
If it's in the same row, just use `var labelId = button.id.substring(0, button.id.lastIndexOf(':') - 1) + 'labelId';` and then pass it to `document.getElementById()`. – BalusC Jun 08 '12 at 18:37

JSF component disappears after binding

1 Answers1

Linked