i have the file upload using primefaces, in advanced mode,
<p:fileUpload fileUploadListener="#{fileUploadController.handleFileUpload(event)}"
mode="advanced"
update="messages"
sizeLimit="100000000"
allowTypes="/(\.|\/)(gif|jpe?g|png|doc|docx|txt|pdf)$/"
auto="true"/>
<p:growl id="messages" showDetail="true"/>
But i want to add a few nice finishing touches, like i have seen examples that use growl, that pops up a message saying success etc once completed, but am unsure on how to do this with glassfish, and do it on completion of the file being uploaded
Thanks
Solved the issue, my bean wasn't configured correctly thats all :)
EDIT :
Looked into the glassfish console and saw it was not calling the event caller, so it was skipping this enter section, i just simply changed the method call in the xhtml, and make sure the bean was correct, if anyone wants to see the bean just post a comment and ill add it :)
Related
I have a form upload component on my page and want to make more actions in JavaScript after file upload is complete and page updated.
I put simple log statement to test for "oncomplete" execution, but it never happens.
File is successfully uploaded and other parts of page updated, but no "oncomplete" actions performed.
Here is my component:
<p:fileUpload id="objectUpload1"
fileUploadListener="#{importBackingBean.handleFileUpload}"
mode="advanced" dragDropSupport="true"
invalidFileMessage="Недопустимый тип файла"
invalidSizeMessage="Размер файла превышает 5 МВ"
cancelLabel="#{msg['stop_LABEL']}"
uploadLabel="#{msg['Upload_LABEL']}"
label="#{msg['Choose_LABEL']}" update="results objects_Data"
sizeLimit="5000000" allowTypes="/(\.|\/)(xlsx|xls)$/"
oncomplete="load();" />
And my Javascript:
<script type="text/javascript">
function load() {
console.log('File Uploaded!');
$("button[id*='load']").click();
}
</script>
Button:
<p:commandButton value="Загрузить полисы"
oncomplete="#{importModelBean.needToLoadMore ? 'load();' :'none();'}"
id="load"
action="#{importBackingBean.loadOneRow(importModelBean.current)}"
process="#this" update="mainViewForm:objects_Data" />
When I click the button manually it works just fine. But not getting clicked with oncomplete of filepload.
Using the codes given, I have reproduced this scenario. Although $("button[id*='load']").click(); has been invoked correctly, no log is showing. I am guessing that the button with an id load is set to ajax=”false”. If this is true, then I think that the message was logged the moment console.log('File Uploaded!'); is invoked but was cleared since the page is updated after the load button process. Do you need the log for something? If not, just remove console.log('File Uploaded!'); code and it should work just fine.
EDIT:
I misunderstood you. I thought that your concern was that the message was not logged in the console.
I have tested your codes on two projects (running on two different computers) and I can’t reproduce your problem.
Project 1:
Primefaces 6.0
JSF 2.0
WAS 8.5
IE 11
Project 2:
Primefaces 5.x
JSF 2.0
Glassfish 4.1
Google Chrome
I even tried oncomplete=”alert(‘hello!’)” and it worked fine.
I think that the problem is somewhere else.
For the mean time, can you try the following codes and see if it works:
<p:fileUpload id="objectUpload1"
fileUploadListener="#{importBackingBean.handleFileUpload}"
mode="advanced" dragDropSupport="true"
invalidFileMessage="Недопустимый тип файла"
invalidSizeMessage="Размер файла превышает 5 МВ"
cancelLabel="#{msg['stop_LABEL']}"
uploadLabel="#{msg['Upload_LABEL']}"
label="#{msg['Choose_LABEL']}" update="results objects_Data"
sizeLimit="5000000" allowTypes="/(\.|\/)(xlsx|xls)$/"
oncomplete="rc()" />
<p:remoteCommand name="rc"
oncomplete="#{importModelBean.needToLoadMore ? 'load();' :'none();'}"
action="#{importBackingBean.loadOneRow(importModelBean.current)}"
process="#this" update="mainViewForm:objects_Data" />
For more information about p:remoteCommand, please refer to primefaces showcase RemoteCommand.
CommandButton displays the growl. But the previous growl message is lost. How can make growl display messages stack?
For example:
<h:form>
<p:growl id="growl" showDetail="true" life="6000" />
<p:commandButton value="Show" actionListener="#{growlView.showMessage}" update="growl" />
</h:form>
And bean function:
public void showMessage() {
FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Hello"));
}
I click button every second. I expect that messages will store and display for 6 seconds.
But after click button, previous message hides and i see only current message.
When i debugging i have that:
FacesContext.getCurrentInstance().getMessageList().size() == 0
I tried
FacesContext.getCurrentInstance().getExternalContext().getFlash().setKeepMessages(true);
than
<context-param>
<param-name>org.primefaces.messagePersistence</param-name>
<param-value>true</param-value>
</context-param>
But is doesn't work =(
Please help
An simple solution using the primefaces 5.1 for those who want to display messages on a stack manner in the same p:growl without hide the previous messages is to override the default behavior of the component adding a primefacesFixes.js file to the classpath and override the function with the commented line below:
primefacesFixes.js:
PrimeFaces.widget.Growl.prototype.show = function(b) {
var a = this;
this.jq.css("z-index", ++PrimeFaces.zindex);
//this.removeAll(); //Commenting this line prevents an ajax update tho the <p:growl> from erasing global messages
$.each(b, function(c, d) {
a.renderMessage(d);
});
};
So you call the fixes file like this on your template tag:
<h:outputScript name="javascript/primefacesFixes.js" target="head" />
And can use only one p:growl on the page to render all the needed messages.
Unfortunately, this is not currently possible. Actually, it was the default behaviour back in 2011 (having stacked growl messages) but the primefaces core team has decided to:
hide previous messages before displaying new ones on ajax update
Source: https://code.google.com/p/primefaces/issues/detail?id=1925
However, an issue was created here (October 2014) to bring back this feature but has not been reviewed yet.
Posting this on a old question, but this may be one solution (although, I'm on PFv6.2):
<p:growl id="messages" showDetail="true" keepAlive="true"/>
Simply add the keepAlive="true" to the growl element.
My code in RichFaces 3.3.3:
<a:region>
<h:form>
<a:poll id="feed" enabled="true" reRender="feedReader" interval="100"/>
</h:form>
</a:region>
<h:form>
<h:outputText value="#{feedReader2.title}" id="feedReader" />
</h:form>
This is close to the example here: http://www.mastertheboss.com/richfaces/using-ajax-with-jboss-richfaces
What it should do is poll the server which reads an rss feed and gives back the title.
However, this is not working. In Chrome developer tools I can't see any AJAX requests made to the server. Instead, I see an error Uncaught TypeError: Cannot read property action of null on framework.pack.js. The line in which the error occurs is:
this._actionUrl=(this._form.action)?this._form.action:this._form
I can only guess that this is releated to the <h:form> which doesn't have an action attribute. But I don't see why I need this here, as it is not included in all of the examples you can find.
Moreover, I do not want the <h:outputText> to query the bean on page load. My aim is to use AJAX to read the feed after the page is done rendering.
If this is an issue related to my RichFaces version, could someone please give me an example on how to do this in 3.3.3?
I found the issue. It was an error outside the above markup i've included. Had two <h:form> nested, which caused the second one to malfunction.
I'm working on building a web page and notice now that I have to press the command button twice. Any command button has the same problem, so I figured I would add and action listener on one of them to see if I could see something.
<h:form id="formP">
<p:commandButton id="temp" value="photos" actionListener="#{viewBacking.debugBreakpoint()}" action="userPhoto" />
</h:form>
The backing bean has
public void debugBreakpoint() {
int i = 0;
i++;
}
Unfortunately, this does help. It hits my breakpoint only after the second press. I suspect that some field somewhere isn't passing validation but I would like some method of detecting what exactly is going wrong - why do I need the second push? Is there some option I can turn on in Glassfish, or something else where I can look at a dump of debug information? I can ignore the dump until everything is stable and then see what exactly is happening when I press the button for the first time.
Is there any such tool which I can use?
That can happen when a parent component of the given <h:form> has been rendered/updated by another command button/link with <f:ajax>. The given form will then lose its view state which it would only get back after submitting the form for the first time. Any subsequent submits will then work the usual way. This is caused by a bug in JSF JS API as descibred in JSF issue 790 which is fixed in the upcoming JSF 2.2.
You need to fix the another command button/link with <f:ajax> to explicitly include the client ID of the given <h:form> in the render.
<f:ajax render=":somePanel :formP" />
Another way is to replace this <f:ajax> by a PrimeFaces <p:commandLink> or <p:commandButton> so that you don't need to explicitly include the client ID of all the forms. PrimeFaces's own JS API has namely already incorporated this fix.
add event="onclick" in your p:commandbutton
I guess that will sort it out.
or you can add this ajax="false" property in your commandButton
<p:commandButton ajax="false" action="#{userController.create}" value="#{bundle.CreateUserSaveLink}"></p:commandButton>
I ran into the same issue. The solution was simple, instead of having both an actionListener and an action, just convert the actionListener method to return a string to where you want to navigate to and use it as the method for the action (and don't have an actionListener).
In simple terms: only use an action (do not use an actionListener on a commandButton that is submitting a form).
Please check your binding with bean.
bean fields should be String or non primitive.
I writed an ajax request for any data. But the data don't work with h:inputHidden.
I think it's a bug of Primefaces.
But I don't know how to get the data now.
code:
<h:inputHidden id="buttonData" value="#{buttonDataBean.buttonData}" />
...
<p:commandButton id="getData" action="#{buttonAction.getButtonData}" update="buttonData" />
When I click the commandButton, the value of don't work.
But if I use the h:outputText, it worked.
My requirement:
Before click the commandButton, I have create any html buttons dynamically. I want to click the commandButton and update the name and position of html buttons. So that I must get any data and update the html buttons with Javascript.
how could I do about it?
If I want to use the JavaScript to get the ajax data, how to do it. I see the document and find two method: jsf.ajax.request() and Primefaces.ajax.AjaxRequest(). But I don't know how to use the two method. for example: Primefaces.ajax.AjaxRequest("test.xhtml",,). The "test.xhtml" how to request the method testMethod of TestAction?
use firebug to inspect html code. you can see new value
<h:form id="form">
<h:inputHidden id="buttonData" value="#{buttonDataBean.buttonData}" />
<p:commandButton id="getData" value="button"
action="#{buttonDataBean.buttonAction}" update="buttonData" />
</h:form>
If your problem does not get solved with primefaces ajax, you can use the native ajax provided by jsf have a look at it.It works, i have done many such things with it.
Instead of using a hidden input you could take advantage of JSF and use a f:param or f:attribute.
Read this really fine article, under the brand of BalusC: http://balusc.blogspot.com/2006/06/communication-in-jsf.html .