如何从 ajax 启用的 PrimeFaces 命令按钮转到新的 JSF 页面答案

【问题标题】：How to go to a new JSF page from a PrimeFaces commandbutton enabled from ajax如何从 ajax 启用的 PrimeFaces 命令按钮转到新的 JSF 页面
【发布时间】：2015-12-29 06:19:33
【问题描述】：

我用下面的代码创建了一个 UI。

<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="http://xmlns.jcp.org/jsf/html"
  xmlns:p="http://primefaces.org/ui">
<h:head>
    <title>Zip Files loading</title>
    <h:outputStylesheet library="css" name="style.css"  />

</h:head>
<h:body styleClass="bImage">
    <center>
        <b><font color="Yellow" size="36px"> Welcome</font> </b>
        <br/><br/><br/><br/><br/><br/>
        <p:graphicImage  library="images" name="filetrans.gif" id="img" style="display: block"></p:graphicImage>
        <br/><br/><br/><br/>
        <h:form>   
            <p:growl id="growl" />
            <p:commandButton value="Upload zip files" type="button" onclick="PF('pbAjax').start();
                    PF('startButton2').disable();
                    PF('cancelButton').enable();
                    show(PF('img'));" widgetVar="startButton2" />
            &#160;&#160;&#160;
            <p:commandButton disabled="true" value="Cancel" widgetVar="cancelButton" actionListener="#{progressBarView.cancel}" oncomplete="PF('pbAjax').cancel();PF('startButton2').enable();PF('cancelButton').disable();" />
            <br /><br />
            <p:progressBar widgetVar="pbAjax" ajax="true" value="#{progressBarView.progress}" labelTemplate="{value}%" styleClass="animated" global="false" style="width:400px">
                <p:ajax event="complete" listener="#{progressBarView.onComplete}" update="growl" oncomplete="PF('startButton2').enable(); PF('btnReport').enable();hide(PF('img'));"/>
            </p:progressBar>
            <br/><br/><br/><br/>
            <p:commandButton disabled="true" widgetVar="btnReport" value="View Report" action="Report"/>

        </h:form>
    </center>
    <script type="text/javascript">
        function show(id) {
            var element = document.getElementById(id);
            element.style.display = 'none';
        }
        function hide(id) {
            var element = document.getElementById(id);
            element.style.display = 'block';

        }
    </script>
</h:body>

在上面的代码中，我想通过点击按钮View Report（最后一个按钮）转到下一个JSF页面Report.xhtml。此按钮最初是禁用的，当进度条完成时，它会被启用。我尝试点击下一页的按钮，但我做不到。

另一方面，如果我不控制 ajax 按钮的禁用（即不启用和禁用它），我可以轻松转到下一个 JSF 页面。

【问题讨论】：

当我复制到我的工作区时，您在问题中的代码有很多 js 问题。
@MahendranAyyarsamyKandiar 它没有向我显示任何问题.. UI 在浏览器上可见。您遇到了什么错误？

标签： ajax jsf jsf-2 primefaces

【解决方案1】：

您的View Report 命令按钮默认是禁用的（就像您使用disabled=true 一样），使用PF('btnReport').enable() 从Javascript 启用它只会使按钮更改CSS 并使其看起来像启用，但实际上您的按钮是已禁用。
要使其工作，请在托管 bean 上创建一个变量。例如：

boolean disableReportBtn  = true;
public void onComplete(){
//your existing logic
disableReportBtn   = false;
}

还有 XHTML：

<p:commandButton id="reportBtnId" disabled="#{progressBarView.disableReportBtn}" widgetVar="btnReport" value="View Report" action="Report"/>

进度条完成后更新按钮：

 <p:progressBar widgetVar="pbAjax" ajax="true" value="#{progressBarView.progress}" labelTemplate="{value}%" styleClass="animated" global="false" style="width:400px">
    <p:ajax event="complete" listener="#{progressBarView.onComplete}" update="growl reportBtnId" oncomplete="PF('startButton2').enable();hide(PF('img'));"/>
 </p:progressBar>

【讨论】：

即使在进度完成后按钮也不会启用。 :(