Search code examples
htmljsfjsf-2primefaces

Update the page with command bouton primefaces


I want to get the value of the input Textarea and show it in the same page by clicking on the command button "compiler " however i don't get any result ! and the contnet is only shown when I update with the browser updater Sh How do I upate the page and the managed beans to show the content of a primefaces textarea in the same page this is the code:

<p:layoutUnit position="west" size="520" header="Code à executer" resizable="true" >
    <h:form id="moncode">
 <p:inputTextarea id="mycode" value="#{fichier.code}" rows="17" cols="50" /> 
 <p:commandButton value="compiler" id="btn3"  action="guest.xhtml"   styleClass="myButtonClass" />
    </h:form>
</p:layoutUnit>

<p:layoutUnit position="east" size="550" header="Resultat d'execution" resizable="true" >
   <h:outputText value="#{fichier.code}" /> 
</p:layoutUnit>


             <p:layoutUnit position="south"  >




my application is about compiling a given code: I write a code and then I executed with the button "compiler" so a file will be created however the file is always created with "null" and I think because the var "code" is not yet set in the managed bean that why I want to update the page so the managed bean ill be set here is compile: ` private String code; private String error;

public String getCode() {
    return code;
}

public String getError() {
    return error;
}
 public void setCode(String code) {
    this.code = code;
}

 public void compile() throws IOException {
 File file = new File("C:\\Users\\Rad1\\test.c");
 PrintWriter ecrivain;  
 ecrivain = new PrintWriter(new BufferedWriter (new FileWriter(file))); 
      ecrivain.println(code);  
  ecrivain.close();                

`


Solution

  • There are two ways to achieve what you want: either by using a synchronous submit of a form with a subsequesnt postback, or by sending an AJAX request to partially update necessary parts of the page.

    Synchronous submit

    <p:inputTextarea id="mycode" value="#{fichier.code}" rows="17" cols="50" /> 
    <p:commandButton value="compiler" id="btn3" action="#{fichier.action}" styleClass="myButtonClass" ajax="false" />
    <h:outputText id="upd" value="#{fichier.code}" /> 
    

    with action method

    public String action() {
        //do business job
        return null;
    }
    

    This way a fields will be refreshed by making a postback. Don't forget that the bean Fichier must be view scoped. Note the ajax="false" attribute of <p:commandButton>.

    AJAX call

    <p:inputTextarea id="mycode" value="#{fichier.code}" rows="17" cols="50" /> 
    <p:commandButton value="compiler" id="btn3" action="#{fichier.action}" styleClass="myButtonClass" update="upd" />
    <h:outputText id="upd" value="#{fichier.code}" /> 
    

    with the same action method

    public String action() {
        //do business job
        return null;
    }
    

    This way only the contents of <h:outputText> will be updated after AJAX call is finished. Don't forget that the bean Fichier should also be view scoped. Note that id attribute of <h:outputText> must be specified.