Hide/Show components dinamically onClick event

[alucardeck]

Hi,

i need to create something like "p:inplace" component..

when i click in an specific component, it will disappear and make another component reappear in his place..
but i am having problems on how to do that with <p:ajax> (should i use it?)
i would like both components show/hide dinamically


in this example i am using a outputLink, but i will need to do this with other components too..
how can i hide 'link" and show "cal" components in a single action?

Code: Select all

<h:panelGroup id="groupFrom">
	<h:outputLink id="link" value="#{cruiseFilterBean.from}">
		<f:convertDateTime pattern="dd/MM/yyyy" type="date"/>
		<p:ajax update="groupFrom" event="click" action="??? what should be here ???" />
	</h:outputLink>
	<p:calendar id="cal" pattern="dd/MM/yyyy" value="#{cruiseFilterBean.from}" navigator="true" effect="fadeIn" />
</h:panelGroup>

there is a way that i dont need to create any method on my bean?
because i would need to do that for almost 20 items.

Thanks in advance!

[fenoloco]

You can use the oncomplete attribute as follows

Code: Select all

<p:ajax update="groupFrom" event="click"  onComplete = "widgetVarName.show ()"  />

regards

[alucardeck]

thanks for the reply,

but this widget only works with PF components, correct?

how i do that with a JSF component?
or there is a way to do a wrapper with a PF component?

[fenoloco]

apologies for the delay.
What comes to my mind is the following.

Create a js function like this

Code: Select all

function hideComp(){                       
                        jQuery('#iFecha').hide();                        
}

(you can add parameters) and add it to the web

Then call it from the OnComplete method, it should work.

Code: Select all

<p:ajax update="groupFrom" event="click"   onComplete="hideCustom()" />

less verbose

Code: Select all

<p:ajax update="groupFrom" event="click"   onComplete="jQuery('#iFecha').hide();" />

regards