[英]how to call a j-query modal dialog in jsf dataTable
我有以这种方式调用模式的jQuery javascript文件,这在js脚本中
$("#dialog_f").dialog({autoOpen: false,
modal: true,
width: 400});
$("#dialog_p").click(function() {
$("#dialog_f").dialog('open');
console.log('modal called');
});
这是在jsf xhtml页面中
<button class="btn" type="button" id="dialog_p">Update Fault</button>
<div class="dialog" id="dialog_f" style="display: none;" title="Update Fault">
<div class="block">
</div>
</div>
这在正常页面中工作正常,但是在jsf dataTable中,我注意到它从托管bean调用列表中的最后一个Object,并且不弹出模式。 我通过在js文件中打印console.log注意到了这一点。 是否有可能在列表中呈现了id并且控制器不知道哪个按钮应该调用模式?
<ui:define name="content">
<h:dataTable var="fau" value="#{faultController.allFaultsT}" >
<h:column >
<f:facet name="header" >
Fault Id
</f:facet>
<h:outputText value="#{fau.faultId}" />
</h:column>
<h:column >
<f:facet name="header" >
action
</f:facet>
<button class="btn" type="button" id="dialog_f">Update Fault</button>
<div class="dialog" id="dialog_p" style="display: none;" title="Update Fault">
<div class="block">
</div>
</div>
</h:column>
</h:dataTable>
</ui:define>
注意:另外,使用类会弹出所有模态,这是一个坏主意;)
$("#dialog_p").dialog({autoOpen: false,
modal: true,
width: 400});
function openDialog() {
$("#dialog_p").dialog('open');
console.log('modal called');
};
....
<ui:define name="content">
<h:dataTable var="fau" value="#{faultController.allFaultsT}" >
<h:column >
<f:facet name="header" >
Fault Id
</f:facet>
<h:outputText value="#{fau.faultId}" />
</h:column>
<h:column>
<f:facet name="header" >
action
</f:facet>
<button class="btn" type="button" onclick="openDialog();">Update Fault</button>
</h:column>
</h:dataTable>
<div class="dialog" id="dialog_p" style="display: none;" title="Update Fault">
<div class="block">
</div>
</div>
</ui:define>
为什么表格中的每一行都需要一个对话框? 我想您想在对话框中显示特定于行的数据。 如果是这样,那么您可以通过支持bean来实现。
最终通过使用var object中的特定id使它起作用,并且所有对话框仍然处于渲染状态,因此在呈现时会在元素中生成对话框。
<button class="btn" type="button" onclick="openDialog('#{fau.faultId}');">Update Fault</button>
<div id="#{fau.faultId}" class="dialog" style="display: none;" title="Update Fault">
<div class="block">
<h:outputText value="#{fau.faultId}" />
</div>
</div>
function openDialog(value) {
$('#'+value).dialog({autoOpen: false,
modal: true,
width: 400});
$('#'+value).dialog('open');
console.log('modal called '+value);
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.