Jsf 渲染组件时如何应用Primefaces效果

我有拖拽面板和拖拽面板，当组件被拖拽到拖拽面板中时，我会根据渲染布尔属性显示一个新面板并隐藏旧面板，如下所示：

1-xhtml:

<p:outputPanel id="oldPanel" rendered=#{myBean.old_panel_rendered}> .... </p:outputPanel>
<p:outputPanel id="newPanel" rendered=#{myBean.new_panel_rendered}> .... </p:outputPanel>

old_panel_rendered=true;
new_panel_rendered=false;

public void onComponentDrop(DragDropEvent ddEvent) { 

        old_panel_rendered=false;
        new_panel_rendered=true;

    }

如何在渲染newPanel时为其执行效果，以及在未渲染oldPanel时为其执行效果

---

请告知，谢谢。

调用js函数，该函数将在新项目删除时应用效果：

<p:ajax listener="#{bean.onDrop}" onstart="applyEffects();" update="newPanel" />

• 调用

  document.getElementById

  时，不要忘记提供组件的准确客户端id。您可以通过浏览器的开发人员设置来检测它。如果出现问题，您可以删除

  update=“newPanel”

  ，或者您可以尝试

  update=“oldpanel newPanel”

为了能够将其应用于特定面板：

public void onComponentDrop(DragDropEvent ddEvent) { 
    int id = event.getData();//or sth.similar to getId
    RequestContext.getCurrentInstance().addCallbackParam("index", id);
}  

上面的代码向ajax响应添加了一个参数，可以通过以下方式检索该参数：

function applyEffects(xhr,status,args) {
    var oldPanel = $(document.getElementById('oldPanel'));
    var newPanel = $(document.getElementById('newPanel'));
    if(args.id=='oldPanel') {//oldPanel or whatever which equals to eventID
        oldPanel.css({"display":"none"});//or oldPanel.fadeOut(500) which looks fancy
    }
    newPanel.css({"display":"inline"});
    newPanel.effect("highlight",
            {color:"#87FF7A"}, 1500);
}

---

您应该从

p:ajaxoncomplete=“applyEffects（xhr，status，args）；”

调用它。我在这里直接编码，因此可以很容易地在IDE上看到一些错误。

我只想在不是每次执行函数时都显示旧面板的情况下应用淡出效果，如何添加一个条件来实现这一点。@MahmoudSaleh您确定要通过

oncomplete

调用它吗？不要将其放入

document.ready

函数中。还可以通过firebug发出警报或调试，并确保它是否被调用。面板的ID类似于notebook_form:blank_panel，因此我尝试了如下转义notebook_form\\\：blank_panel，但它不工作，所以发出了

警报（1）并看到它已发出警报，对吗？如果是，则表示函数调用正确，并且id等于notebook_form:blank
$（document.getElementById（'notebook_form:blank'）
应该得到正确的元素。@MahmoudSaleh，因为它必须等到服务器放置参数作业结束，这就是oncomplete工作的原因。
function applyEffects(xhr,status,args) {
    var oldPanel = $(document.getElementById('oldPanel'));
    var newPanel = $(document.getElementById('newPanel'));
    if(args.id=='oldPanel') {//oldPanel or whatever which equals to eventID
        oldPanel.css({"display":"none"});//or oldPanel.fadeOut(500) which looks fancy
    }
    newPanel.css({"display":"inline"});
    newPanel.effect("highlight",
            {color:"#87FF7A"}, 1500);
}