jsf 验证阶段成功后触发 onclick 事件

Question

我想在我的网站中显示处理微调器。我在命令按钮上使用以下简单的 onclick 事件

<h:commandButton class="uploadButton"  onclick="monitor();" value="Upload" update="msgsuccess" action="#{appUploadBean.uploadApp()}"/>


<p:outputPanel id="parentPanel" style="display:none">
                                   <div id="uploadPForm:msgupload" class="ui-messages ui-widget" aria-live="polite" data-summary="data-summary" data-severity="info">
                                      <div class="ui-messages-info ui-corner-all">
                                         <a href="#" class="ui-messages-close" onclick="$(this).parent().slideUp();return false;">
                                            <span class="ui-icon ui-icon-close" />
                                         </a>
                                        <h:graphicImage id="image" library="assets" name="images/ajax-loader.gif"></h:graphicImage> 
                                         <ul>
                                            <li>
                                               <span class="ui-messages-info-summary">Uploading Apk</span>
                                            </li>
                                         </ul>
                                      </div>
                                   </div>
                                 </p:outputPanel>  

--javascript

    function monitor(){
                console.log("monitor called");
                var loading = document.getElementById("uploadPForm:parentPanel");
                loading.style.display = "block";
                return false;           
            }

现在的问题是，只要我单击命令按钮，微调器就会开始显示。我只想在验证阶段成功后显示微调器，即在第 3 阶段之后..

有什么办法可以做到吗？

Answer 1

在支持 bean AppUploadBean 中，您将拥有属性：

Bean 必须是 ViewScoped（首选）或 SessionScoped

private boolean rendered;

public String uploadApp(){
...
rendered = true;
return "actualpage.xhtml?faces-redirect=true";
}

public boolean isRendered(){
return rendered
}

在 xhtml 中：

<h:form>
...

    <p:commandButton class="uploadButton" value="Upload" update="msgsuccess" ajax="false" action="#{appUploadBean.uploadApp}"/>

    <p:outputPanel id="parentPanel" rendered="#{appUploadBean.rendered}">
    ...
    </p:outputPanel> 

...
</h:form>