p:button to toggle inplace input

Question

I'm trying to get a button that will switch an p:inplace item. I'm trying to use the toggle function but am not having any luck.

<p:inplace widgetVar="X" >
  <p:inputText  value="test"></p:inputText>
 </p:inplace>

<p:button value="toggle" onclick="X.toggle()" />

When I do this I get the following message in my browser's console

Uncaught TypeError: Cannot call method 'fadeOut' of undefined primefaces.js.jsf:18 PrimeFaces.widget.Inplace.PrimeFaces.widget.BaseWidget.extend.toggle primefaces.js.jsf:18 onclick

Answer 1

It looks like there is a bug with the default effect. Change the effect to one of the other standard effects and see if that gets you going.

<p:inplace widgetVar="X" effect="clip">
  <p:inputText  value="test"></p:inputText>
</p:inplace>

The available effects as defined in the user manual:

• blind
• clip
• drop
• explode
• fold
• puff
• slide
• scale
• bounce
• highlight
• pulsate
• shake
• size
• transfer