jsf - 使用从另一个表单更新表单在 JSF 中

Question

再会，

我正在 java server faces 2.2.20 和 mariadb 10.4 数据库中开发一个应用程序。使用 f: ajax 更新到另一种形式时出现问题，其中我有一个表格，其中列出了输入了各自图像的产品，但是从 bean 到 html 中的 img 的方法返回的图像没有显示，尽管图像如果它在 src 中有其各自的路线；如果在不重新加载页面的情况下正确更新内容作为文本，这意味着如果 ajax 部分工作。

---

这是输入产品数据并将图像上传到控制器的代码。

                <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>                                                                

第一个表单视图
第二个数据视图

这是从视图的commandButton调用的控制器方法的代码，它负责保存输入的产品数据和相应的图像。

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

}

这是我需要使用 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>

[在此处输入图片描述][3]

这是控制器的代码，负责返回输入的数据，显示在我需要重新加载的表中。

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

}

这是保存输入的数据并执行jsf ajax时的样子，但是即使我查看img标签的src，也无法将图像可视化，找到了路径。查看页面的唯一方法是任意重新加载整个页面，但这不是想法。

在此视图中，文本渲染完成，但未显示图像

用 f12 检查元素，我们可以看到 img 标签，如果它有正确的路径，但没有用 JSF f: ajax 显示。我非常感谢您给我帮助，我已经搜索，阅读，记录了，事实是我无法自己解决，我不明白需要什么。快乐的一天非常感谢。

用F12检查视图，显示src属性有图片路径

标签： jsfjsf-2