<h:commandButton value="A" action="#{juegoService.ingresarPalabra('A')}">
</h:commandButton>
I'm using JSF 2.0, and I have a button like the above,
for each letter of the alphabet that call a method that load an image on the page, depending the word you press will load the corresponding image, but I need to call the method without reloading the page because I can only have loaded one image on the page, because when I click other the page reloads the Bean and the other image returns to the first state thats its not charged.
You should use f:ajax and refresh container with image.
<h:commandButton value="A with AJAX" id="button" action="#{juegoService.ingresarPalabra('A')}" >
<f:ajax execute="#this" render="containerId" />
</h:commandButton>
Related
I have a jsf page that loads an image dynamically. The image generation may take a few seconds, so I would like to display a message or a gif so the user knows something is loading (at the moment there is just an empty space during loading).
I have tried to use primeface's deferred loading, but it made no difference at all.
I have a ajaxStatus in my page, but it is not activated during loading.
Here is the code containing the graphicImage:
<p:outputPanel deferred="true">
<h:graphicImage
value="/wfDiagram?processId=#{workflowAction.processId}"/>
</p:outputPanel>
the value is pointing to a servlet that handles image generation.
You should try the primefaces p:blockUI component.
Here is some example:
<p:blockUI widgetVar="loading" trigger="btnFilterProgram" block=":layout">
<h:panelGrid styleClass="custom-painelgrid-center">
<h:outputText value="Loading" />
<p:graphicImage value="resources/img/loading.gif" />
</h:panelGrid>
</p:blockUI>
In this case, a kind of "popup dialog" opens when the user clicks the button with the id btnFilterProgram and the component closes itself after the AJAX request is finished.
The title says almost all. Just an important precision: the menu is in a template and so is shared by several pages and I don't know the page from which the user will choose the menu item.
I tried with a h:commandLink but I have a problem with the redirection to the same page. Perhaps there is a another kind of solution?
Just make it an asynchronous submit instead of a synchronous submit. Nest in a <f:ajax>.
<h:commandLink ...>
<f:ajax />
</h:commandLink>
If you intend to execute or render some specific parts, specify them accordingly in the execute and/or render attribute of <f:ajax>. They both defaults to #this and #none respectively. E.g.
<h:commandLink ...>
<f:ajax execute="#form" render="#form" />
</h:commandLink>
I have a <p:dialog> which contains a <h:selectOneMenu> with a valueChangeListener. Here's the relevant code:
<p:dialog>
<h:form>
<div>
<h:selectOneMenu value="#{itemController.itemId}" valueChangeListener="#{itemController.chkItemType}" onchange="submit()">
<f:selectItems value="#{itemController.itemsList}" />
</h:selectOneMenu>
</div>
</h:form>
</p:dialog>
When it is called, the dialog get closed. I would like to keep it open and only close it on cancel button. How can I achieve this?
That's expected behaviour. The onchange="submit()" which you've there submits the entire form synchronously, causing a complete page reload.
You should be using ajax instead to perform the submit. Replace the onchange attribute by just this tag
<f:ajax />
inside the <h:selectOneMenu>. This way the form will be submitted asynchronously, with by default no page reload at all.
Depending on the concrete functional requirement, which you didn't tell anything about, you do probably also not need a valueChangeListener at all, but rather a <f:ajax listener>.
<f:ajax listener="#{itemController.chkItemType}" />
If you'd like to update some parts of the page on successful execution of the ajax request, use its render attribute.
See also:
When to use valueChangeListener or f:ajax listener?
I'm trying to make a JSF reload the locale (which is defined in the view)
<f:view locale="#{admin.userLocale}">
<h:commandButton image="images/ukflag.gif" action="#{admin.returnToEnglish}" immediate="true" onclick="window.location.reload()" />
<h:commandButton value="1" action="#{admin.returnToEnglish}" immediate="true" onclick="window.location.reload()" />
<h:commandButton value="2" action="#{admin.returnToEnglish}" immediate="true" onclick="history.go(0)" />
<h:commandButton value="3" action="#{admin.returnToEnglish}" immediate="true" onclick="window.location.href=window.location.href" />
<h:commandLink value="4">
<a4j:support event="onclick" reRender="GeneralConfigForm" action="#{admin.returnToEnglish}" />
</h:commandLink>
</f:view>
I tried all of the above buttons.
They all do the same thing - They call the method the changes the locale, the page reloads but the new locale labels are not loaded correctly.
At this point, if I reload again the changes catch up and the locale is shown correctly.
How do I make the buttons update the local earlier so the page will show the new locale when it is brought up?
Thanks!
P.S - On JSF 1.2
I'm not sure how you got it to work after a refresh. Is the #{admin.userLocale} stored in the request scope instead of the session scope? The first four buttons won't invoke any JSF action at all. The JS function in the onclick get executed first and it changes the current page and hereby the default action is totally aborted. The fifth seem to be the only which should work, although a <h:form> is missing for all those buttons, but I'll bet that it's just the oversimplification of the code example.
Regardless, the usual practice is to store the user-specified locale in the session scope. When you want to change it by a JSF action method, then you need to send a redirect afterwards so that a new view will be created with the desired locale. Otherwise the initial locale will indeed be used in the response and thus you have to change it in the current view yourself by
FacesContext.getCurrentInstance().getViewRoot().setLocale(newLocale);
in the action method.
So, let me show us my troubles :)
1 - When i click on a commandbutton
<h:commandButton value="Somethings">
<f:setPropertyActionListener target="#{bean.method}" value="some" />
<f:ajax render="rendering"/>
</h:commandButton>
I dont do any action to the commandButton. Just i fire the ajax call. If i add an action on the button (like action="bean.myAction) it will be executedat the 5° phase of the JSF lifecycle (allright, only if i write event="action" in the f:ajax, but thats as default). Right? But the f:ajax is fired by cliccing on the button as default? Because for a ListBox for example, it's fired only if i write event="change" (the same, i shouldnt write it, because is as default).
2 - When i click on image
<h:graphicImage value="img/img.png" alt="img">
<f:setPropertyActionListener target="#{bean.method}" value="some" />
<f:ajax event="onclick" render="rendering"/>
</h:graphicImage>
This doesnt work. Why?
As usual, thanks for the help!!!!
1 - When i click on a commandbutton
I dont do any action to the commandButton. Just i fire the ajax call. If i add an action on the button (like action="bean.myAction) it will be executedat the 5° phase of the JSF lifecycle
The f:setPropertyActionListener will be executed in the 5th phase as well.
(allright, only if i write event="action" in the f:ajax, but thats as default). Right? But the f:ajax is fired by cliccing on the button as default? Because for a ListBox for example, it's fired only if i write event="change" (the same, i shouldnt write it, because is as default).
The f:ajax just changes the behaviour from a synchronous submit to asynchronous (partial) submit. It does that by generating some additional JavaScript code to the desired event attribute of the parent component (e.g. onclick, onchange, etc, look in generated HTML output in webbrowser). It doesn't change anything in the JSF lifecycle. Only the rendered response will be a partial response which is exactly the part which is to be updated in the component(s) with ID as definied in render attribute.
2 - When i click on image
This doesnt work. Why?
Because the h:graphicImage does not support f:setPropertyActionListener at all. It only works in UICommand components.
You want to wrap it in a h:commandLink instead.
<h:commandLink>
<f:setPropertyActionListener target="#{bean.method}" value="some" />
<f:ajax event="action" render="rendering"/>
<h:graphicImage value="img/img.png" alt="img"/>
</h:commandLink>
(and if necessary style the border/underline caused by generated <a> element away with CSS)