0

Buen Dia,

Me encuentro desarrollando una aplicacion en java server faces 2.2.20 y bases de datos mariadb 10.4.
Tengo un problema al momento de realizar la actualizacion con f:ajax a otro formulario donde tengo una tabla que lista los productos con sus respectivas imagenes ingresadas, pero no se visualizan las imagenes que devuelve el metodo desde el bean al img en html, auque la imagen si tiene en el src su respectiva ruta; Lo bueno el contenido como texto si se actualiza correctamente sin recargar la pagina esto quiere decir que si funciona en parte el ajax.

______________________________________________________________________________ Este el codigo donde se ingresa los datos del producto y se carga la imagen al controlador.

<!--Crear categorias -->                                        
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
    <div class="container">
        <div class="row">
            <div class="col-lg">
                <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>                                                                
            </div>
        </div>
    </div>
</div>

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí


Este es el codigo del metodo del controlador que se llama desde el commandButton de la vista, que se encarga de guardar los datos ingresados del producto y la respectiva imagen.

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="";        
}

Este el codigo de la vista que necesito recargar mediante 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>

Este es el codigo del controlador que se encarga de retornar los datos ingresados, para visualizarse en la tabla que necesito recargar.

public List<Imagen> listarImagenes(){
    try {
        return imagenFacadeLocal.findAll();
    } catch (Exception e) {
        return null;
    }
}

Asi se mira cuando se guardan los datos ingresados y se ejecuta el ajax de jsf, pero la imagen no se logra visualizar aunque si miro el src de la etiqueta img, se encuentra la ruta. La unica manera de visualizar la pagina es recargando toda la pagina arbitrariamente, pero no es la idea. introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí


Inspeccionando el elemento con f12, podemos ver que la etiqueta img, si tiene la ruta corrrecta, pero no se visualiza con el f:ajax de JSF.
Agradezco mucho que me den una ayuda, ya he buscado, leido, documentado y la verdad no logro solucionarlo por mi propia cuenta, no entiendo que hace falta. Feliz dia muchas gracias.

2
  • Podrían confirma si la imagen esta dentro del proyecto, porque veo que hece referencia a una carpeta resource, si es interna debes tener en cuenta que es resource del proyecto web no de java, por ejemplo en mi caso <h:graphicImage name="/serenity-layout/images/avatar4.png" style="height: 75px;"/> y la ruta en el proyecto es proyecto-jsf\src\main\webapp\resources\serenity-layout\images\avatar4.png como se ve no necesitas hacer referencia a la carpeta resource y en la se transforma en <img src="/javax.faces.resource/serenity-layout/images/avatar4.png.xhtml" style="height: 75px;"> el 14 ago. 2019 a las 8:00
  • Hola Roberto E, muchas gracias por tu comentario. Te confirmo que la carpeta Resources si se encuentra del proyecto. /Shopping/WEB Pages/Resources/img/Categorias/. Y dentro del directorio categorias creo las carpetas de los productos. Y el archivo que llama las imagenes lo tengo en /Shopping/Web Pages/Administrador/inventario.xhtml ; por esta razon es que hago ../Resources/img/ ... el 14 ago. 2019 a las 17:32

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.