如何在jsf-dataTable中调用j-query模态对话框

how to call a j-query modal dialog in jsf dataTable

本文关键字：j-query 模态 对话框 调用 jsf-dataTable      更新时间：2023-09-26

我有一个jquery javascript文件，它以这种方式调用modal，这是在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>

N.B或者，使用一个类会弹出所有模态，这是个坏主意；）

$("#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>

为什么表中的每一行都需要一个对话框？我想您想在对话框中显示特定于行的数据。如果是这样，那么您可以通过您的backingbean来实现这一点。

最终通过使用var对象中的特定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);
 };
相关文章：