With HTML5 you can make file uploads with Ajax and jQuery. Not only that, you can do file validations (name, size, and MIME type) or handle the progress event with the HTML5 progress tag (or a div). Recently I had to make a file uploader, but I didn't want to use Flash nor Iframes or plugins and after some research I came up with the solution.
The HTML:
<form enctype="multipart/form-data">
<input name="file" type="file" />
<input type="button" value="Upload" />
</form>
<progress></progress>
First, you can do some validation if you want. For example, in the .on('change') event of the file:
$(':file').on('change', function () {
var file = this.files[0];
if (file.size > 1024) {
alert('max upload size is 1k');
}
// Also see .name, .type
});
Now the $.ajax() submit with the button's click:
$(':button').on('click', function () {
$.ajax({
// Your server script to process the upload
url: 'upload.php',
type: 'POST',
// Form data
data: new FormData($('form')[0]),
// Tell jQuery not to process data or worry about content-type
// You *must* include these options!
cache: false,
contentType: false,
processData: false,
// Custom XMLHttpRequest
xhr: function () {
var myXhr = $.ajaxSettings.xhr();
if (myXhr.upload) {
// For handling the progress of the upload
myXhr.upload.addEventListener('progress', function (e) {
if (e.lengthComputable) {
$('progress').attr({
value: e.loaded,
max: e.total,
});
}
}, false);
}
return myXhr;
}
});
});
As you can see, with HTML5 (and some research) file uploading not only becomes possible but super easy. Try it with Google Chrome as some of the HTML5 components of the examples aren't available in every browser.
In more recent versions of PrimeFaces, SelectEvent should be usedsee the following code snippet
<p:calendar id="event" value="#{calendarView.date4}">
<p:ajax event="dateSelect" listener="#{calendarView.onDateSelect}" update="msgs" />
</p:calendar>
public void onDateSelect(SelectEvent event) {
FacesContext facesContext = FacesContext.getCurrentInstance();
SimpleDateFormat format = new SimpleDateFormat("dd/MM/yyyy");
facesContext.addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Date Selected", format.format(event.getObject())));
}
In older primefaces versions use DateSelectEvent
<p:ajax event="dateSelect" listener="#{caseUitility.dateChange}"/>
public void dateChange(DateSelectEvent event) {
Date date = event.getDate();
System.out.println("File Date: " + date);
System.out.println("Hello... I am in DateChange");
}
Best Answer
You cannot update elements which are not rendered ,
rendered=false"is a JSF way to" to remove elements from the DOM Tree ,its not like css
display:noneorvisibility:hidden<- this two will keep the elements in the DOM tree but hidden , while the JSFrendered=falsewont even render (keep) the element in the DOM tree (you wont even see it in the "view source" of the page)So in you case you need to wrap the
outputLabelwith `panelGroup' and update the id of the wrapperand refer to the wrapper (which always be in the DOM tree) id in the
<p:ajaxupdateattribute, like this:Another solution would be the update the entire form like this
<p:ajax update="@form" ...that way you don't need the wrap theoutputLabelregarding your comment question
You can't target an element in
updatewhich is not present in the page (rendered=false) "its not there"But when you use
update="@form"orupdate="someWrapperID"the form/wrapper "re evaluates" all its inner elements , including the ones withrendered="#{someBean.someCondition}"and the condition gets "re evaluated" so if it result totruethe elemet will be displayed...