Question

我在表单中有一个jsf页面和一个commandButton。

<h:form>
     ...
    <h:commandButton action="#{mainViewController.showRelatedPayments()}" id="openpay" onclick="openModal();" value="Tst"></h:commandButton>
     ...
</h:form>

在同一个jsf页面，我有一个模态div ..

 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
     <div class="modal-dialog">
         <div class="modal-content">
              <div class="modal-header">
                   <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                   <h4 class="modal-title" id="myModalLabel">Modal titles</h4>
              </div>
              <div class="modal-body">
                   ....
                   Dynamic content must be here 
                   ....
              </div>
              <div class="modal-footer">
                   <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

              </div>
        </div>
  </div>

我还有一个javascript文件，其中包含openModal（）函数。

function openModal() {

      $('#myModal').modal('show');
  }

当我点击按钮时，它调用javascript函数并显示模态div，但页面刷新和打开模态消失..

该按钮还调用我的支持bean方法：

public void showRelatedPayments() {
        LOG.info("creating data for page..");
        /*...
           ...
            ...
        */
    }

我要做的是点击按钮调用支持bean方法，该方法为模态内容创建数据而不刷新整个jsf页面。

这可能吗？有人可以帮帮我吗？

Answer 1

<h:commandButton action="#{mainViewController.showRelatedPayments()}" 
    id="openpay" onclick="openModal();" value="Tst" />

该代码的确如此：

打开模态对话框。
调用命令按钮操作以加载数据。
重新加载整页。

但你真的想要这个：

调用命令按钮操作以加载数据。
仅重新加载模态对话框。
打开模态对话框。

您需要按所需顺序移动任务并投入ajax魔法来实现部分页面重新加载。 <f:ajax>对此很有帮助。

<h:commandButton action="#{mainViewController.showRelatedPayments()}" 
    id="openpay" value="Tst">
    <f:ajax execute="@form" render=":relatedPayments" 
        onevent="function(data) { if (data.status == 'success') openModal(); }" />
</h:commandButton>

并将其添加到模态对话框的内容中，该内容应动态更新。

<h:panelGroup id="relatedPayments" layout="block">
    ....
    Dynamic content must be here 
    ....
</h:panelGroup>

Jsf commandbutton调用javascript函数然后刷新整个页面

1 个答案: