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

我在表单中有一个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函数，modaldiv会显示出来，但随后页面刷新，打开的modal会消失。。

按钮也调用我的backingbean方法：

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

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

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

<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>

相关内容

最新更新

热门标签：