从JavaScript调用托管bean方法，最终填充Primefaces对话框组件

invoking a managed bean method from JavaScript to finally populate a Primefaces dialog component

本文关键字：填充 Primefaces 组件 对话框 方法 调用 JavaScript bean      更新时间：2023-09-26

所以我有一个集成纯JavaScript和素数面对话框组件的问题。用户应该获得一个覆盖对话框（单个），作为对点击许多动态JavaScript生成的Div元素（多个）的响应。对话框的内容应该取决于用户点击的div元素

模拟该问题的简化结构如下：

javascript（谷歌关闭）:

// this code is in a loop that creates multiple div elements
// in the page dom structure.
var iconDiv = goog.dom.createDom('div', {
        'id': nodeId, // **
        'class': 'icondiv',
        'style': iconDivStyle   // **
    }, goog.dom.createDom('img', {
        'src': 'layer_icons/unused.png',
        'class': 'iconDivImg',
        'style': 'width:100% ;position:absolute; height: auto; '
    }));
       goog.events.listen(iconDiv,goog.events.EventType.CLICK,function (e){
    // in an ideal situation, the stringField is set to 'this.id' here ...
            dlg1.show();
        });
//** these are the code lines that mark the difference between the
//   divs created in the loop.

"素面"对话框：

这是当用户单击任何图标时显示的对话框组件在上面的javascript中创建。

<p:dialog id="DialogId" dynamic="true" widgetVar="dlg1"> 
    <h:form id="formId">
    <p:outputLabel id="clickedOnDiv_Id" value=" #{managedBean.stringField}"/>
<p:outputLabel id="somePropertyOfThisDiv_Id" value="#{managedBean.stringFieldSetByMethod}"/>
    </h:form>
</p:dialog>

托管Bean：

class managedBean {
private String stringField ;  // getter and setter
private String stringFieldSetByMethod ;  // getter and setter
public void method(){
// uses the stringField in some way to set 'stringFieldSetByMethod' ...
}
}

以上就是我想要实现的，如果你已经找到了实现它的方法，请建议。

接下来是我迄今为止尝试的：

我添加了以下javascript函数：

populateDialog = function(divId){
document.getElementById('formId:hiddenInput').value = divId;
document.getElementById('formId:hdnBtn').click();
}

因此onClick事件处理程序更改为以下内容：

goog.events.listen(iconDiv,goog.events.EventType.CLICK,function (e){
divId = this.id;   // where divId is a variable accessible to populateDialog()
dlg1.show();
        });  // this is inside a loop, so it is set for each created div

然后我添加populateDialog（）作为对话框的OnShow回调，并将其更改为：

<p:dialog id="DialogId" dynamic="true" widgetVar="dlg1" onShow="populateDialog();">
       <h:form id="formId">
             <h:inputHidden id="hiddenInput" value="#{nodesBean.stringField}" />
             <p:commandButton id="hdnBtn" ajax="true" actionListener="#{managedBean.method()}" style="display: none;" update=":formId"/>
        <p:outputLabel id="clickedOnDiv_Id" value="#{managedBean.stringField}"/>
        <p:outputLabel id="somePropertyOfThisDiv_Id" value="#{managedBean.stringFieldSetByMethod}"/>
       </h:form>
</p:dialog>

结果是managedBean.method从未被调用，并且在加载对话框时所有字段都为空，我可以跟踪进度在调用populateDialog（）之前，divId是正确的，我没有收到JavaScript错误。然而，服务器完全一无所知关于我正在做的所有客户端的驼峰和跳跃，如果能解释一下真正发生的事情，我将不胜感激。

提前感谢！

因此解决方案使用：

在对话框中：

`<h:inputHidden id="hiddenInput" value="#{nodesBean.stringField}" />
<p:remoteCommand name="remoteCommandFunction" process="hiddenInput" update=":formId"/>`

在onclick处理程序中（每个动态创建的div）

goog.events.listen(iconDiv,goog.events.EventType.CLICK,function (e){
divId = this.id;   // where divId is a variable accessible to populateDialog()
dlg1.show();
    });  // this is inside a loop, so it is set for each created div

作为对话框调用的javascript函数显示回调：

populateDialog = function(divId){
document.getElementById('formId:hiddenInput').value = divId;
remoteCommandFunction(); // this is cool cause it solves my problem, not cool cause you really have to know what you're looking for in the documentation to find it >:-/
}

最后，在托管bean中：

class managedBean {
private String stringField ;  // getter and setter
private String stringFieldSetByMethod ;  // getter and setter
 public void setStringField(String sf){
         this.stringField = sf;
         method();
      }
public void method(){
// uses the stringField in some way to set 'stringFieldSetByMethod' ...
                   }
}
相关文章：