Question

我已按以下方式在页面中创建了DIV部分：

<div id="modalAlert" style="display: none;">
 <h:panelGroup layout="block">
   <p>My Heading </p>
   </h:panelGroup>
   <h:panelGroup layout="block">
   </h:panelGroup><h:panelGroup layout="block">
   <h:commandButton id="btnSaveConfirmation" value="save" action="#{myBean.method}"> </h:commandButton>                    
  </h:panelGroup>                           
</div>

我使用以下JS脚本使用jQuery显示SimpleModal窗口：

function showAlert() {
    fundpickerdialog = $('#modalAlert').modal({
        opacity : 100,
        overlayCss: {backgroundColor:"#fff"},
        modal : true,
        dataId : 'modalAlert',
        classname: 'ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable',
        closeOnEscape : false, 
        width : 50,
        height : 50
    }); 
}

$(document).ready(function() {

        showAlert();
    }   

});

模态窗口出现但是在单击“保存”按钮时，它没有调用辅助bean方法。

Answer 1

你忘了表单标签（h：commandButton必须位于表单内），用标签包装div的内容

尝试这样的事情：

<div id="modalAlert" style="display: none;">
 <h:form>
  <h:panelGroup layout="block">
  <p>My Heading </p>
  </h:panelGroup>
  <h:panelGroup layout="block">
  </h:panelGroup><h:panelGroup layout="block">
  <h:commandButton id="btnSaveConfirmation" value="save" action="#{myBean.method}"></h:commandButton>                  
  </h:panelGroup> 
 </h:form>                          
</div>

Answer 2

一些JavaScript / jQuery模式对话框方法将从HTML DOM树中的当前位置删除表示模态对话框及其所有子元素的元素，并将其重新插入为<body>的直接子元素，以便防止各种浏览器的潜在定位和分层问题。由于您没有将<form>放在表示模态对话框的元素中，因此它最终将成为无形式。

你真的需要把<h:form> 放在里面代表模态对话框的元素。

此外，我建议使用JSF组件库而不是任意jQuery插件。例如，PrimeFaces具有<p:dialog>组件，正是出于此目的。它已经考虑到潜在的讨厌的JSF相关副作用，而不需要编写任何额外的JS / jQuery代码。

jQuery SimpleModal窗口中的命令按钮不会调用操作

2 个答案: