Jsf 2 如何在ajax调用的响应中隐藏元素

Jsf 2 如何在ajax调用的响应中隐藏元素,jsf-2,primefaces,Jsf 2,Primefaces,我有一个JSF页面 <div id="SaarcImage"> <h:panelGrid id="saarcImagesTable" columns="4" style="position: relative; top: 50px;" columnClasses="nameColumn" > <span class="asterisk">*</span><span class="l

我有一个JSF页面

<div id="SaarcImage">

    <h:panelGrid id="saarcImagesTable" columns="4" style="position: relative; top: 50px;"
                 columnClasses="nameColumn" >

        <span class="asterisk">*</span><span class="labels"> #{label.saarcCountryMap}: </span>
        <p:fileUpload id="cityMap" widgetVar="uploader" description="Image"
                      update="countryMap" allowTypes="*.jpg;*.png;*.gif;*.jpeg;"
                      auto="true" fileUploadListener="#{countryPages_Detail.imageUpload}">

       </p:fileUpload>

       <p:graphicImage id="countryMap" value="#{countryPages_Detail.imagePath}"
                       width="80" height="50" cache="false">

          <f:event type="preRenderComponent" listener="#{countryPages_Detail.putImage}" />

       </p:graphicImage>

       <h:commandLink id="removeCountryMap" value="remove" title="Remove Picture"
                      style="color: #0d5b7f;text-decoration: underline;"
                      onclick="if (! confirm('Are you sure, you want to remove picture?') ) { return false;}; return true; ">

          <f:ajax event="click" render="countryMap"
                  listener="#{countryPages_Detail.removeImage}"/>

      </h:commandLink>

      ........   //7 more images

    </h:panelGrid>
</div>
但此脚本仅在页面加载时运行。因为我正在使用ajax更新图像,所以如果我上传任何图像,那么脚本将不会运行,我的删除链接也不会再次出现。如果我没有预览。jpg那么删除链接就不会出现


谢谢

IMO每次调用js函数时浏览所有图像不是很有效。我将使用参数创建一个js函数:例如,
afterUpload(imageID)
,它将在
p:fileUpload的
oncomplete
中被调用。在此函数中,您可以检查上载的带有
imageID
的图像是否没有-preview.jpg源,并呈现
commandLink
。然后我会改变
谢谢。您的意思是说
p:fileUpload
有一个名为
oncomplete
的事件。我使用的是PrimeFaces2.2,我检查了文档,在
p:fileUpload
中没有名为
oncomplete
的事件。如何检查上传完成后图像是否已更改?谢谢你啊,你没有说你正在使用旧的2.2版本。如果不是最新版本,请下次再提及该版本<代码>OnComplete
属性可从3.0版获得。你能做的就是切换到新的版本——我强烈推荐,很多bug都被修复了,新的酷东西被添加了。如果您负担不起切换,您可以修改
FileUploadRenderer.java
如下:。或者尝试寻找其他解决方案OK谢谢。。。我找到了文件
fielUploadOnComplete.diff
。但是我如何在项目中使用它呢。我正在使用Netbeans。我的项目库文件夹中有PF2.2 jar吗?如何使用此文件…?您可以在项目上应用差异修补程序,如下所示:右键单击netbeans-->版本控制-->应用差异修补程序中的项目。问题是你只需要修补primefaces,所以我会备份(复制)你的项目,然后再试,因为我不知道是否会出问题。我从来没有这样做过。如果不起作用,只需手动替换或将diff patch中的线条添加到primefaces类别中即可。希望有帮助!
@ViewScoped
public class CountryPages_Detail {

    private int x = 0;
    private boolean remove;

    public void removeImage() {
        remove = true;      
    } //end of removeImage()

    public void putImage(ComponentSystemEvent event) {
        GraphicImage image1 = (GraphicImage)event.getComponent();
        String imageId = image1.getClientId();

        // Check to ensure that x doesn't greater than the number of images
        if (x > 7) {
            x = 0;
        } //end of if (x > 4)

        if (remove || uploadImage) {

            if (imageId.contains("countryMap")) {
                x = 0;
            } else if (imageId.contains("Image1")) {
             x = 1;
            }
            ....
        }
        ArrayList imagesNames = (ArrayList)session.getAttribute("countryDetailImageNames");

        for(; x<imagesNames.size(); x++) {
            String fileName = imagesNames.get(x).toString();
            if (fileName.contains(imageId)) {
                if (remove) {
                    imagePath = "";
                    imagePath = "/resources/images/no-preview.jpg";
                    imageNames.set(x, "no-preview.jpg"); //also remove from list
                    remove = false;
                    break;
                }
            } else if (fileName.contains("no-preview")) {
                 imagePath = "";
                 imagePath = "/resources/images/no-preview.jpg";
                 x++;
                 break;
            }              
        } //end of for()
    } //end of putImage()
} //end of class CountryPages_Detail
var saarcImages = $("#SaarcImage #saarcImagesTable tr").each(function(index){

    var $tr = $(this);
    var $image = $tr.find("img");

    if ($image.length != 0) {   //Image exist

        var imageSource = $image.attr("src");       
        var contains = imageSource.indexOf("no-preview.jpg") >= 0; // true

        if (contains) {
            $tr.find("a").fadeOut("slow");
        } else {
            $tr.find("a").fadeIn("slow");
        }
    }
}); //end of .each()