Change visibility onclick jsf

0
votes

I want to make a text editable when the user clicks on the text.

So I thought I can handle this by realising this with two components 

        <h:outputText id="description_" value="#{cc.attrs.description}" /> 

        <h:inputText id="description" value="#{cc.attrs.description}" />

Now the problem is, that both components are displayed at the same time. I would like the behaviour that h:inputText will be hidden/collapsed. When the user clicks on the h:outputText the h:outputText should be hidden and the h:inputText should be shown so that the user can edit the text in the input. If the h:inputText lost its focus the h:outputText should be shown and the h:inputText be hidden.

Is there a JSF solution for this?

1
javascriptjsf
I would wrap the <h:outputText> inside a <span> and use plain JavaScript to do the hide/show work, so no need of any ajax somewhat expensive call. - Luiggi Mendoza
Do you need to submit on blur? - BalusC
I will add into the <h:input a <f:ajax event="keyup" tag, so that the changed text will be saved automatically. So no submit Button will be needed. - Briefkasten
@Luiggi Mendoza how can this be in pure js be done? - Briefkasten

1 Answers

0
votes

One solution would be to use http://www.primefaces.org/showcase/ui/inplace.jsf or use h:outputLabel and ajax.