How do I hide the button until the action is complete? Primefaces
I currently have a file upload system and I currently have a button to go to the next page, but this is visible even if the user has not uploaded anything, the danger is here if the user clicks this before uploading anything it will throw an error and look bad, so I'm trying to hide this button until the file upload is successfully achieved, any ideas how?
<p:fileUpload widgetVar="upload" fileUploadListener="#{fileUploadController.handleFileUpload}"
mode="advanced"
multiple="false"
update="messages"
label="Select File"
sizeLimit="100000000"
allowTypes="/(\.|\/)(gif|jpe?g|png|doc|docx|txt|pdf|html)$/"
auto="true"/>
<!-- selected auto="true" this has been selected to prevent user error as was discovered
when testing, some users pressed the upload button and wondered why nothing worked instead of
select file, now this stops this -->
<p:growl id="messages" showDetail="true"/>
Please press the button below once you have uploaded the file, to continue
<p:commandButton action="#{navigationBean.naviagtion}" value="Next" ajax="False"/>
The next command line command is the one I want to disable before the file download completes.
EDIT:
<p:commandButton action="#{navigationBean.naviagtion}" value="Next" ajax="False" disabled="#{!fileUploadController.UploadComplete}"/>
Is my command button, it points to fileUploadContoller, file upload happens here, etc.
the problem is that when i run the app i get a live button always on page load
I added a boolean to the fileUploadController:
public void handleFileUpload(FileUploadEvent event) {
//System.out.println("DesintationPDF : " + destinationPDF);
System.out.println("called handle file");
System.out.println("Destination is : " + configProp.getProperty("destination"));
FacesMessage msg = new FacesMessage("Succesful", event.getFile().getFileName() + " is uploaded."); //Displays to user on the webpage
FacesContext.getCurrentInstance().addMessage(null, msg);
try {
copyFile(event.getFile().getFileName(), event.getFile().getInputstream());
} catch (IOException e) {
//handle the exception
e.printStackTrace();
}
}
public boolean isUploadComplete() {
return uploadComplete;
}
public void setUploadComplete(boolean uploadComplete) {
this.uploadComplete = uploadComplete;
}
but still get error
EDIT 2:
<p:commandButton action="#{navigationBean.naviagtion}" value="Next" disabled="#{!fileUploadController.uploadComplete}"/>
console
INFO: Upload complete value before copy file false
INFO: upload complete value is : true
so it changes the value to true
but doesn't change the button to live
source to share
To disable the button before the download is complete, simply bind the attribute disabled
to a property in the bean. Disabling it seems much more intuitive in my opinion than suddenly rendering it. The user also knows that something is happening in the background.
<p:commandButton action="#{navigationBean.naviagtion}" value="Next" disabled="#{bean.disable}" ajax="False"/>
Since you are using PrimeFaces, this solution is the simplest. Just replace bean
with the name of your bean.
Edit:
public class YourNavigationBean {
private boolean uploadComplete; // <--- that the property
// ... your bean content, like constructors and stuff..
// ...
//a setter and a getter is needed, to here they are
public boolean isUploadComplete() {
return uploadComplete;
}
public void setUploadComplete(boolean uploadComplete) {
this.uploadComplete = uploadComplete;
}
}
source to share
ON Load full set of events = block.
Html
<form action="#" method="post">
<input type="file" name="fileInput" id="fileInput" />
<input type="submit" id="submitbutton" value="submit" style="display:none" />
</form>
<div id="result"></div>
Javascript:
$(document).ready(
function(){
$('input:file').change(
function(){
if ($(this).val()) {
document.getElementById("submitbutton").style.display='block';
}
}
);
});
Live demo: http://jsfiddle.net/E42XA/205/
source to share