如何在組件呈現

Question

我有拖動面板拖放面板，當組件在託板被丟棄我展現出新的面板和隱藏基於渲染布爾屬性的舊面板如下申請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> 

2-豆：

old_panel_rendered=true; 
new_panel_rendered=false; 

public void onComponentDrop(DragDropEvent ddEvent) { 

     old_panel_rendered=false; 
     new_panel_rendered=true; 

    } 

如何在渲染時爲newPanel執行效果，並在渲染時爲oldPanel執行效果。

請指教，謝謝。

新項目時droppped將適用效果

Answer 1

調用JS功能：

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

功能是：

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

• 打電話時，不要忘了給組件的確切客戶端ID document.getElementById。您可以通過瀏覽器的開發人員設置來檢測它。如果出現問題，您可以放棄update="newPanel"或者您可以嘗試update="oldpanel newpanel"。

爲了能夠運用它的特定面板：

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:ajax oncomplete="applyEffects(xhr,status,args);"稱之爲：

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

上的代碼將添加一個參數來Ajax響應它可以被檢索。我在這裏直接編碼，因此可以很容易地在IDE上看到很少的錯誤。