我有一个整合纯JavaScript和primefaces对话框组件的问题。
当用户单击多个动态生成的Div元素之一时,用户应该得到一个覆盖对话框(单个)作为响应。对话框的内容应该取决于用户单击的div元素。
以下是类似于此问题的简化结构:
JavaScript(Google闭包):
// 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.
PrimeFaces对话框:
这是一个对话框组件,当用户点击上述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永远不会被调用,当对话框加载时所有字段都为空,我可以跟踪JavaScript的进展直到调用populateDialog(),divId是正确的,并且我没有遇到任何JavaScript错误。然而,服务器完全无法理解我正在进行的所有客户端操作,非常感谢您能给出实际发生的事情的解释。
提前致谢!