CODEWITHSUNDEEP
javascriptjsf-2primefaces
DanG_3280651
DanG_3280651

Reputation: 63

How to validate and if successful open a new tab using JSF 2.0 with Primefaces 3.5?

So I've read several solutions, some of which have gotten me close but not close enough to the behavior I need to implement.

It feels like it should be simple and maybe it is but I am pretty new to JSF and Primefaces so it is not so easy for me.

DESIRED BEHAVIOUR: Upon a click on the 'Run Report' button, validate first if successful execute a method that renders a report in a new tab otherwise stay in the same view and display some error messages. See below my code. Feel free to make suggestions point out mistakes, bad practices. The more feedback the better. I would appreciate actual answers rather than links though. I've been through a lot of questions on SO and could not find an answer that would solve my problem.

The issues I'm having are:

1- I cannot override the target attribute of the form so it opens in a new tab.

2- I cannot call Bean method runReport from within the javascript function handleComplete. I get a 'click' property is not defined ERROR.

Thanks talented programmers of Stack Overflow!!!!!

FILE: report_input.xhmtl

      <h:form id="pieForm" target="_self">
        <p:growl  widgetVar="growlMsg" id="msgs" showDetail="true" sticky="true" />
        <p:panel header="Report Criteria">
        <h:panelGrid columns="5" columnClasses="col-top-style">
          <h:outputLabel value="Date Range:" />
          <h:outputLabel value="From:" />
          <h:outputLabel value="To:" />
          <p:calendar id="startDate" value="#{deficiencyBean.startDate}" mindate=""
       maxdate="#{deficiencyBean.todayDate}" readOnlyInputText="true" size="18" showButtonPanel="true"  popupIconOnly="true" mode="popup" showOn="button"  pattern="MM/dd/yyyy" />
          <p:calendar id="endDate" value="#{deficiencyBean.endDate}" mindate="" 
       maxdate="#{deficiencyBean.todayDate}" readOnlyInputText="true" size="18" showButtonPanel="true"  popupIconOnly="true" mode="popup" showOn="button" pattern="MM/dd/yyyy" />
        </h:panelGrid>
        <h:panelGrid id="submitButton" columns="3" columnClasses="col-top-style">
        <p:commandButton icon="ui-icon-check" update="msgs" action="#{deficiencyBean.runReport}" oncomplete="handleComplete(xhr, status, args) return false;" value="Run Report" />
        <h:commandButton id="realSubmit" actionListener="#{deficiencyBean.runReport}" style="display: none;"/>
        <p:commandButton id="validateFunction" actionListener="#{deficiencyBean.validate}" rendered="false" update="msgs"/> 
        <p:commandButton id="hiddenValidVar" value="#{deficiencyBean.validInput}"  oncomplete="handleComplete(xhr, status, args)"/>
       </h:panelGrid>
      </p:panel>
     </h:form>
    <script>
    function handleComplete(xhr,status,args){
        var valid = args.isValid;
        alert(valid);
        if(valid === 'true'){
        document.getElementById('pieForm').setAttribute("target", "_blank"); // NOT WORKING
        document.getElementById('pieForm').target="_blank";//NOT WORKING
        document.getElementById('pieForm:realSubmit').click();//NOT WORKING
        }
    }
     </script>
     </ui:composition>

    </html>

FILE: ReportBean.java

@ManagedBean(name = "deficiencyBean")
@SessionScoped
@SuppressWarnings("serial")
public class deficiencyBean implements Serializable{
private Date startDate; //public getters n setters
private Date endDate;   //public getters n setters 
private Boolean validInput; //public getters n setters 
public Boolean validate(){
//SOME LOGIC
   RequestContext.getCurrentInstance().execute("document.getElementById('pieForm').target='_blank'");//NOT WORKING
    if(validInput){
        RequestContext.getCurrentInstance().addCallbackParam("isValid", validInput);

    }
}
public void runReport(){
   //JASPER REPORTS COMPILE, FILL REPORT and DISPLAY
}

}//END OF CLASS

Upvotes: 2

Views: 1161

Answers (1)

DanG_3280651
DanG_3280651

Reputation: 63

I was finally able to solve the problem.

Description of the approach used. Upon clicking the button to submit the form, call the validation function in the Managed Bean and use a RequestContext object to add a callback parameter (with the result of the validation) to the front end.

Then use handleComplete(xhr, status, args) function to check on the return value of the server validation.

From JavaScript call a hidden commandLink to submit the report if the validation passed then run the report and DONE!!!!!

I will try to make my question simpler for next time. Feel free to ask questions about my solution if it is not clear to you.

CHANGES AS BELOW:

FILE: report_input.xhmtl

Beginning of the file ...
<h:panelGrid id="submitButton" columns="3" columnClasses="col-top-adhoc">
                <h:outputLabel></h:outputLabel>
                <p:commandButton icon="ui-icon-check" action="#{deficiencyBean.validate}" 
                update="msgs" value="Run Report" oncomplete="handleComplete(xhr, status, args)" />

                <h:commandLink action="#{deficiencyBean.runReport}" id="runReportLink" target="_blank" value="Run Report" style="display: none;">
                </h:commandLink>
            </h:panelGrid>
        </p:panel>
    </h:form>
    <script>
    function handleComplete(xhr,status,args){
        var valid = args.isValid;
        if(valid == true){          
            document.getElementById('pieForm:runReportLink').click();
        }
    }   
</script>

FILE: ReportBean.java

public void validate(){
//SOME LOGIC
RequestContext reqContext = RequestContext.getCurrentInstance();
reqContext.addCallbackParam("isValid", validInput); 


}
public void runReport(){
   //JASPER REPORTS COMPILE, FILL REPORT and DISPLAY
}

}//END OF CLASS

Upvotes: 2

Related Questions