Jsf 2 如何在ajax调用的响应中隐藏元素
我有一个JSF页面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
<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()