Question

我有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或者，使用一个类弹出所有模态，这是一个坏主意;）

Answer 1

$("#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实现这一点。

Answer 2

最后通过使用来自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);
 };

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

2 个答案: