primefaces - p:按钮切换就地输入

Question

我正在尝试获得一个可以切换 p:inplace 项目的按钮。我正在尝试使用切换功能，但没有任何运气。

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

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

当我这样做时，我在浏览器的控制台中收到以下消息

未捕获的类型错误：无法调用未定义的 primefaces.js.jsf:18 PrimeFaces.widget.Inplace.PrimeFaces.widget.BaseWidget.extend.toggle primefaces.js.jsf:18 onclick 的方法“fadeOut”

Answer 1

看起来默认效果有一个错误。将效果更改为其他标准效果之一，看看是否能让您继续前进。

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

用户手册中定义的可用效果：

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

Answer 2

切换 javascript 函数看起来很奇怪。它仅支持 3 个效果值。它还需要两个第一个参数 - 要显示的元素和要隐藏的元素。不知道如何使用它。

PrimeFaces.widget.Inplace.prototype.toggle = function(elToShow, elToHide, callback) {
    var _self = this;
    if(this.cfg.effect == 'fade') {
        elToHide.fadeOut(this.cfg.effectSpeed,
                function(){
            elToShow.fadeIn(_self.cfg.effectSpeed);

            if(callback)
                callback.call(_self);
        });
    }
    else if(this.cfg.effect == 'slide') {
        elToHide.slideUp(this.cfg.effectSpeed,
                function(){
            elToShow.slideDown(_self.cfg.effectSpeed);
        });
    }
    else if(this.cfg.effect == 'none') {
        elToHide.hide();
        elToShow.show();
    }
}

我可以推荐至少一种解决方法（相当骇人听闻，因为它使用标签生成的标记的内部 id，但对我有用（PrimeFaces 3.5）：

<p:inplace event="none" id="xId">
    <h:inputText value="test"/>
</p:inplace>
<p:commandButton value="Toggle" 
    oncomplete="$('#xId_content,#xId_display').toggle()" />

Answer 3

PrimeFaces 的最新版本（从 4 和更高版本 iirc）可以选择添加type="button"到，p:commandButton然后它不会在服务器上调用任何东西，只是客户端 javascript

Answer 4

尝试使用它，对我有用：

    <p:commandLink onclick="PF('X').toggle()" title="Toggle"></p:commandLink>

它会为你切换你的widgetvar。

Answer 5

非常简单：而不是toggle()你必须使用show(), resp。hide()功能，在你的情况下：

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