如何从ajax启用的PrimeFaces命令按钮转到新的JSF页面_Ajax_Jsf_Jsf 2_Primefaces

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

ajax jsf jsf-2 primefaces

如何从ajax启用的PrimeFaces命令按钮转到新的JSF页面,ajax,jsf,jsf-2,primefaces,Ajax,Jsf,Jsf 2,Primefaces,我已经用下面的代码创建了一个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"

我已经用下面的代码创建了一个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>


Zip文件加载
欢迎















   









功能显示（id）{
var元素=document.getElementById（id）；
element.style.display='none'；
}
函数隐藏（id）{
var元素=document.getElementById（id）；
element.style.display='block'；
}

在上面的代码中，我想点击按钮查看报告（最后一个按钮），转到下一个JSF页面

Report.xhtml

。此按钮最初被禁用，当进度条完成时，它将被启用。我试着点击按钮进入下一页，但是我不能

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

默认情况下，您的

查看报告命令按钮被禁用（正如您使用的disabled=true
），使用PF（'btnReport'）从Javascript启用它。enable（）
只会使按钮更改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>


即使在进度完成后，该按钮也不会启用：（当我复制到我的工作区时，您在问题中的代码有很多js问题。@Mahendranayyarsamykandair它没有向我显示任何问题。.用户界面在浏览器上可见。您遇到了哪些错误？