Update form from another form using <f: ajax> in JSF - jsf

Question

Good day,
I am developing an application in java server faces 2.2.20 and mariadb 10.4 databases.
I have a problem when updating with f: ajax to another form where I have a table that lists the products with their respective images entered, but the images returned by the method from the bean to the img in html are not displayed, although the image if it has in the src its respective route; The good content as text if it is updated correctly without reloading the page this means that if ajax works in part.
This is the code where the product data is entered and the image is uploaded to the controller.
<h:form id="crearCatalogos" enctype="multipart/form-data"> <!--prependId="false" -->
<div class="container">
<div class="row">
<div class="col-lg-5">
<fieldset>
<legend> Informacion:</legend>
<h:messages style="color:red"></h:messages>
<label>Nombre de categoria: </label><br/>
<h:inputText value="#{FileUploadFormBeanRequest.nombreCatalogo}" id="primerNombre" class="inputPersonalizado" html5:placeholder="Ingrese el nombre" maxlength="20" required="true" validatorMessage="No debe superar 20 caracteres" requiredMessage="Ingrese el nombre"></h:inputText><br/><br/>
<label>Seleccionar imagen: </label><br/>
<h:inputFile id="imgInp" value="#{FileUploadFormBeanRequest.archivoCarga}" validator="#{FileUploadFormBeanRequest.validarImagenCategoria}" class="inputPersonalizadoFile"> </h:inputFile>
<br/><br/>
<h:commandButton class="btn btn-primary" value="Cargar">
<f:ajax render="#form : formVerCatalogos : table_verCatalogos" event="action" execute="#form" listener="#{FileUploadFormBeanRequest.guardarDatosCategoria()}"></f:ajax>
</h:commandButton>
</fieldset>
<br/><br/>
</div>
<div class="col-lg-5 imgCategorias">
<div class="text-center">
<img id="noImagen54" src="../TEMPLATE/img/noImagen.jpeg" class="rounded img-thumbnail" alt="..."/>
<img id="imagenCategoriaFile" src="#" class="rounded img-thumbnail imagenCategoriaFile" alt="..."/>
</div>
</div>
</div>
</div> ​
</h:form>
first form view
second view with data
This is the code of the controller method that is called from the commandButton of the view, which is responsible for saving the data entered of the product and the respective image.
public void guardarDatosCategoria() {
this.archivoCarga = archivoCarga;
try (InputStream input = archivoCarga.getInputStream()) {
String fileName = archivoCarga.getSubmittedFileName();
Calendar hoy = Calendar.getInstance();
DateFormat formatter = new SimpleDateFormat("yyyyMMdd-hhmmss");
String[] ext = fileName.split("\\.");
fileName = ext[0] + formatter.format(hoy.getTime()) + "." + ext[1];
File directorio = new File(folder+"/"+this.nombreCatalogo);
if(!directorio.exists()){
if(directorio.mkdir()){
directorio.mkdir();
Files.copy(input, new File(directorio, fileName).toPath());
//System.out.println(directorio.getAbsolutePath());
}else{
System.out.println("Error al crear directorio");
}
}
//String salida = FacesContext.getCurrentInstance().getExternalContext().getApplicationContextPath();
//System.out.println(salida);
Catalogo objCatalogo = new Catalogo();
objCatalogo.setNombre(this.nombreCatalogo);
catalogoFacadeLocal.create(objCatalogo);
Imagen objImagen = new Imagen();
objImagen.setRuta("../Resources/img/Categorias/"+this.nombreCatalogo+"/"+fileName);
objImagen.setEstado("Principal");
objImagen.setIdCatalogo(objCatalogo);
imagenFacadeLocal.create(objImagen);
} catch (Exception e) {
e.printStackTrace();
}
this.archivoCarga=null;
this.nombreCatalogo="";
}
This is the view code that I need to reload using f: ajax de jsf
<!--VER CATEGORIAS -->
<div class="tab-pane fade active show" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
<h:form id="formVerCatalogos">
<table id="table_verCatalogos" class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">CATEGORIA</th>
<th scope="col">TIPO</th>
<th scope="col">IMAGEN</th>
</tr>
</thead>
<tbody>
<c:forEach items="#{FileUploadFormBeanRequest.listarImagenes()}" var="catalogoImg" varStatus="paso" rendered="#{!empty FileUploadFormBeanRequest.listarImagenes()}" >
<tr>
<th scope="row">#{paso.index+1}</th>
<td>#{catalogoImg.idCatalogo.nombre}</td>
<td>#{catalogoImg.estado}</td>
<td><h:graphicImage id="noImagen" value="#{catalogoImg.ruta}" class="rounded img-thumbnail img_ver_categorias"></h:graphicImage> </td>
</tr>
</c:forEach>
</tbody>
</table>
</h:form>
</div>
[enter image description here][3]
This is the code of the controller that is responsible for returning the data entered, to be displayed in the table that I need to reload.
public List<Imagen> listarImagenes(){
try {
return imagenFacadeLocal.findAll();
} catch (Exception e) {
return null;
}
}
This is how you look when the data entered is saved and the jsf ajax is executed, but the image cannot be visualized even if I look at the src of the img tag, the path is found. The only way to view the page is to reload the entire page arbitrarily, but it is not the idea.
in this view the text rendering is done, but the image is not displayed
Inspecting the element with f12, we can see that the img tag, if it has the correct path, but is not displayed with the JSF f: ajax.
I am very grateful that you give me a help, I have already searched, read, documented and the truth is that I cannot solve it on my own, I do not understand what it takes. Happy day thank you very much.
INSPECTING THE VIEW WITH F12, it is shown that the src attribute has the image path