0

我有一个 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>

同样，我在页面上还有 7 个图像。在每个图像渲染之前，我都会调用 preRenderComponent 事件。这是我处理删除链接的方式

@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

如果没有图像，则默认图像为no-preview.jpg。如果用户上传图像，那么我的 putImage() 会被调用，或者如果用户点击删除链接，那么图像会设置为no-preview.jpg和 putImage() 会被调用。现在我希望，如果我的任何图像的图像路径是/resources/images/no-preview.jpg，那么该图像旁边的删除链接不应该出现。现在发生的事情是，无论我有no-preview.jpg或其他图像，我的删除链接都会出现。我希望删除链接仅在我有no-preview.jpg以外的图像时出现。我该怎么做？我制作了一个脚本来检查图像 Scr 属性是否包含no-preview.jpg，如果是，则隐藏所有删除链接。这里是

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

但是这个脚本只在页面加载时运行。因为我正在使用 ajax 更新图像，所以如果我上传任何图像，则脚本不会运行，并且我的删除链接不会再次出现。如果我有图像no-preview.jpg那么删除链接不会出现，我该怎么做。

谢谢

4

0 回答 0