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

I have created a UI with below code.

我用以下代码创建了一个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>

In the above code, I want to go to the next JSF page Report.xhtml on click of button View Report (the last button). This button is initially disabled and when the progress bar is completed then it is enabled. I try clicking on the button to the next page but I'm unable to.

在上面的代码中,我想点击按钮View Report(最后一个按钮)转到下一个JSF页面Report.xhtml。此按钮最初被禁用,当进度条完成时,它将被启用。我尝试点击按钮进入下一页,但我无法做到。

On the other hand, if I don't control the disability of the button from ajax(i.e do not enable and disable it) I'm able to go to the next JSF page easily.

另一方面,如果我不从ajax控制按钮的残疾(即不启用和禁用它),我可以轻松地转到下一个JSF页面。

1 个解决方案

#1

Your View Report command button is disabled by default (as you used disabled=true), enabling it form Javascript using PF('btnReport').enable() will only make the button change CSS and make it look like enabled, but in fact your button is disabled.
To Make this work, create a variable at your managed bean.Like:

默认情况下,您的View Report命令按钮被禁用(因为您使用了disabled = true),使用PF('btnReport')将其启用为Javascript .enable()只会使按钮更改CSS并使其看起来像启用,但事实上您的按钮已被禁用。要使其工作,请在托管bean中创建一个变量。类似:

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

And at you XHTML:

在你的XHTML:

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

Update the button after progress bar complete:

完成进度条后更新按钮:

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

#1

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