JSF2 – Ajax rendering of content outside form

Per aggiornare un compontente tramite ajax si utilizza in jsf si utilizza il tag f:ajax:

<f:ajax render=”<nomeComponente>” />

ma quando il compente è fuori dal form si deve utilizzare la sintassi

render=”<nomeForm>:<nomeComponente>”

vediamo un esempio

UserBean.java

package com;

import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.io.InputStream;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;
import java.util.Map;
import java.util.ResourceBundle;

import javax.annotation.PostConstruct;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ManagedProperty;
import javax.faces.bean.SessionScoped;
import javax.faces.component.UICommand;
import javax.faces.component.UIComponent;
import javax.faces.context.ExternalContext;
import javax.faces.context.FacesContext;
import javax.faces.event.ActionEvent;
import javax.faces.event.AjaxBehaviorEvent;
import javax.servlet.ServletContext;
import org.apache.commons.io.FileUtils;

import org.primefaces.context.RequestContext;
import org.primefaces.event.FileUploadEvent;
import org.primefaces.model.UploadedFile;

@ManagedBean
@SessionScoped
public class UserBean {
 private String result = "Hello world";

 public void updateResult() {

  result = "Ciao Mondo";

 }

 public String getResult() {
  return result;
 }

 public void setResult(String result) {
  this.result = result;
 } 
 
 

}



ajaxoutform.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:p="http://primefaces.org/ui"
 xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head />
<h:body>
 <h:form id="form">
  <h:commandButton id="button" action="#{userBean.updateResult}">
   <f:ajax render=":otherform:result" />
  </h:commandButton>
 </h:form>
 <h:form id="otherform">
  <h:outputText id="result" value="#{userBean.result}" />
 </h:form>

</h:body>
</html>



eseguendo la pagina si ha:



cliccando il tasto, il testo si aggiorna


Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *