javascript - Jsf 命令按钮调用 javascript 函数然后刷新整个页面

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>