I am using PF3.5+JSF2.1.22 and in my web application i am using Primefaces Captcha component. I am getting some weird issue in capcha component,i used captcha component like this in application
<p:captcha id="captcha" label="Captcha" theme="white" />
And i have a PF command page to submit the values to bean
<p:commandButton id="clear" value="Clear" update="captcha" styleClass="kuberbutton" />
When i am using button like above after form submit if any validation issue and other issue coming and age is loading again then Captcha is not visible in page any more but when i am using ajax="false" in PF button then it is working,is this is behavior this component will work i have to do ajax="false"? I checked the PF website they also did same thing Primefaces Captcha
Captcha component in Primefaces currently does not support ajax behavior , that why you must use ajax="false" in your <p:commandButton , you page must be fully reloaded for the captcha to work properly...
If you must have the ajax behavior you could use some other third party solution...
Haven't tried the following, but it might help with ajax issues:
recaptcha - AJAX AP
Displaying reCAPTCHA Without Plugins
How can I load a reCaptcha form using jQuery/AJAX while leaving the reCaptcha scripts in place?
As already said Primefaces Captcha component can't be updated by ajax request. But there is a simple solution - update everything but not Captcha component itself.
Your XHTML:
<h:form id="myForm">
<h:panelGroup id="updateFormAllValuesButNotCaptcha">
Name: <p:inputText id="name" value="#{captchaBean.name}" required="true"/>
<br/>
Comment: <p:inputTextarea id="comment" value="#{captchaBean.comment}" required="true"/>
<br/>
</h:panelGroup>
<p:captcha/>
<p:commandButton value="click me" update="updateFormAllValuesButNotCaptcha"
actionListener="#{captchaBean.someAction}" oncomplete="Recaptcha.reload()"
onerror="Recaptcha.reload()"/>
</h:form>
<p:messages globalOnly="false" autoUpdate="true"/>
Your backing bean:
#ManagedBean
#ViewScoped
public class CaptchaBean implements Serializable {
private String name;
private String comment;
public String getComment() { return comment; }
public void setComment(String comment) { this.comment = comment; }
public String getName() { return name; }
public void setName(String name) { this.name = name; }
public void someAction() {
FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_INFO, "Done", "");
FacesContext.getCurrentInstance().addMessage(null, msg);
}
}
Note that I am updating updateFormAllValuesButNotCaptcha panel which contains all form input fields but not Captcha itself. It is also important to notice that Captcha can't be reused, so you have to reload it always when ajax request has been completed or ended with error.
What you update after commandButton's action succeeded is up to you. You can hide form (do not render it) and show only confirmation message to make sure user won't try to send comment again.
Related
I have 2 command buttons as shown,
<h:commandButton action="#{beanOne.getRefreshData}"
image="images/refresh_data.png" alt="#{messages.refresh}"
style="margin-top:8px" />
<h:commandButton action="#{beanTwo.resetFilter}" id="resetFilterBtn"
disabled="#{beanOne.disabledBtn}"
image="images/reset-filter.png" alt="#{messages.reset_filter}"
style="margin-top:8px;margin-left:5px" />
where refresh data functionality which needs to be invoked in the Application Logic Phase is as such,
public String getRefreshData() throws Exception {
try {
LOG.debug("In class OneBean : getRefreshData()");
setDisabledBtn(true);
// Some business logic code goes here
} catch (Exception e) {
throw e;
}
finally{
}
return IConstants.SUCCESS;
}
The RESET FILTER button needs to be disabled as soon as user clicks on REFRESH DATA and after the refresh data functionality has been processed in the backing bean, only then it(RESET FILTER) needs to be enabled.
Any suggestions?
So, you want to disable it before the request is sent. Your current attempt only disables it after the response associated with the request is returned. This is indeed too late.
Throw some JavaScript into the game to achieve that.
<h:commandButton ... onclick="document.getElementById('form:resetFilterBtn').disabled=true" />
<h:commandButton id="resetFilterBtn" ... />
It will "automagically" be re-enabled when the page refreshes as response to the form submit request. In case you're actually using ajax, then make sure that the disabled button is covered by ajax update.
Update
As per comments, I just used this form and bean on a further blank project with most minimal configuration (and only one dummy image file).
<h:form id="form">
<h:commandButton id="one" image="test.png" action="#{bean.sleep}"
onclick="document.getElementById('form:other').disabled=true" />
<h:commandButton id="other" image="test.png" action="#{bean.sleep}" />
</h:form>
#ManagedBean
#RequestScoped
public class Bean {
public void sleep() throws Exception {
Thread.sleep(2000);
}
}
To be sure, I also added this CSS to the test page because it was in Firefox not immediately visually visible if the button was disabled (although it was visible in the DOM inspector):
<style>input[disabled] { border: 5px solid red; }</style>
It also works properly.
I'm new to JSF and primefaces. I'm using the Primefaces Dialog Framework to pop a modal terms of service agreement. The problem I'm having is that my dialogReturn event handler is not invoked when the dialog closes and the modal overlay remains on the page although the dialog itself closes. The modal overlay may be a red herring because the dialogReturn method is not invoked when the dialog is not modal either.
Here are the relevant pieces of code:
The form from which the dialog is created:
<h:form prependId="false">
<ul>
<ui:repeat value="#{serviceEditor.service.subsystems}" var="ss">
<li>
<em>#{ss.name}</em> - #{ss.description}<br/>
<ui:fragment rendered="#{identity.loggedIn}">
<ui:fragment rendered="#{grantManager.hasAccess(ss)}">
(You have access to this dataset.)
<h:commandButton value="Discontinue Access" action="#{grantManager.unrequestAccess(ss)}"/>
</ui:fragment>
<ui:fragment rendered="#{!grantManager.hasAccess(ss)}">
<p:commandButton value="Request Access"
actionListener="#{serviceDialog.display(ss)}"
styleClass="btn btn-primary" >
<p:ajax event="dialogReturn"
listener="#{serviceEditor.acceptDialogHandler}" />
</p:commandButton>
</ui:fragment>
...
ServiceEditor is annotated #Named #Stateful #ConversationScoped
The actionListener code for the dialog display:
public void display (ServiceSubsystem sub)
{
if (sub == null)
{
log.error("Service Accept dialog attempt with null subservice. Lose.");
FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO, "Subservice Unavailable", "We seem to have misplaced that service. This has been logged for investigation.");
RequestContext.getCurrentInstance().showMessageInDialog(message);
return;
}
log.info("svcDlg: Displaying accept dialog for service: {}.{}", sub.getService().getName(), sub.getName());
this.sub = sub;
Map<String, Object> dlgOpts = new HashMap<>(2);
dlgOpts.put("modal", true);
RequestContext.getCurrentInstance().openDialog("serviceAcceptDialog", dlgOpts, null);
log.info("svcDlg: Did that accept dialog work out?");
}
The actionListener code for the accept command button in the dialog:
public void accept ()
{
log.info("Accepted {}.{}", sub.getService().getName(), sub.getName());
...
String destination = "/service?faces-redirect=true&uuid=" + sub.getService().getUuid();
log.info("Sending user to: {}", destination);
RequestContext.getCurrentInstance().closeDialog(destination);
}
And finally the dialog return listener that is not invoked:
public void acceptDialogHandler (SelectEvent event)
{
String dest = (String) event.getObject();
log.info("Service accept dialog closed. sending here: ", dest);
((ConfigurableNavigationHandler) FacesContext.getCurrentInstance().getApplication().getNavigationHandler())
.performNavigation(dest);
}
What did I miss in the documentation? Or is this a bug?
I think you can try to use primefaces dialog component, is simpler.
To show or close the dialog you only need to invoke it:
PF('widgetVarDialogName').hide();
PF('widgetVarDialogName').show();
You can open or close it in view actions, for example:
<p:commandButton
value="Open dialog"
type="button"
onclick="PF('widgetVarDialogName').show()" />
<p:commandButton
value="Do Action"
action="#{myBean.myAction()}"
oncomplete="PF('widgetVarDialogName').hide();" />
Also, you can invoke it from the bean if you want.
RequestContext.getCurrentInstance().execute("PF('widgetVarDialogName').show()");
RequestContext.getCurrentInstance().execute("PF('widgetVarDialogName').hide()");
(Remember, the dialog must be placed inside the form)
I see you work a lot with the rendered="..." attribute. From what I experienced the <p:ajax event="dialogReturn" /> is not getting fired if itself or a parent element is not rendered.
So have a look in your public void accept() method. If you change some state so that a rendered attirbute of a parent element of the <p:ajax event="dialogReturn" /> namely rendered="#{!grantManager.hasAccess(ss)}" and/or rendered="#{identity.loggedIn}" would evaluate to false then the listener would not be executed.
EDIT
A workaround just came to my mind. One can avoid the problem with the same workaround as if you want to trigger dialog framework from a <p:menuitem /> (Primefaces Dialog Framework — dialogReturn event from menuitem).
Simply create a separate button somewhere outside of the possibly not rendered area and trigger it via javascript.
Not tested code example:
<ui:fragment
id="fragment"
rendered="#{...}">
<h:commandButton
id="pseudo_button"
value="..."
onclick="document.getElementById('real_button').click()" />
</ui:fragment>
<h:commandButton
id="real_button"
action="#{bean.realWorkHere()}"
update="fragment"
style="display:none;">
<p:ajax
event="dialogReturn"
listener="#{...}" />
</h:commandButton>
I have written a piece of code to put two pairs of radio button in a *.xhtml page of a JSF project built in JSF2.0, Jboss As 7.1.1 final and JDK 6.0, PrimeFaces 3.4.2.
<h:panelGrid columns="2">
<h:selectOneRadio value="#{calendarBean.radioFirst}">
<f:selectItem id="morning" itemValue="morning" itemLabel="Morning"/>
<f:selectItem id="afternoon" itemValue="afternoon" itemLabel="Afternoon"/>
</h:selectOneRadio>
<h:selectOneRadio style="padding-left: 170px" value="#{calendarBean.radioSecond}">
<f:selectItem id="noon" itemValue="noon" itemLabel="Noon"/>
<f:selectItem id="endofday" itemValue="endofday" itemLabel="End Of Day"/>
</h:selectOneRadio>
</h:panelGrid>
The Bean is:
private String radioFirst="morning";
private String radioSecond="endofday";
public String getRadioFirst() {
return radioFirst;
}
public void setRadioFirst(String radioFirst) {
this.radioFirst = radioFirst;
}
public String getRadioSecond() {
return radioSecond;
}
public void setRadioSecond(String radioSecond) {
this.radioSecond = radioSecond;
}
I have written a method to invoke on a Action Event where I want to have the values of the radio button selected. when the method invokes I get the value of the radio buttons as "morning" and "endofday" as these two are the initial values of the bean variables.
private String radioFirst="morning";
private String radioSecond="endofday";
But if I change the radio button options, I don't get the updated values, its the same old initial values. How can I get the changed values? Please help!
Three things
Don't use the session scope for this usage scenario. This will go completely wrong when your users open the same page in more than one tab. Use request scope or view scope.
Use a regular action instead of an action listener, and don't provide the radio button values as attributes. This makes no sense. The selectOneRadio components will set the updated values on your backing bean. When your action method is invoked, you will have access to those values via the instance fields of your bean.
Leave out the window.reload. If you need a full page refresh after the action, set ajax to false on the p:commandButton or use an h:commandButton.
You should modify your action button like this :
<p:commandButton actionListener="#{userLeaveBean.addAppliedLeave}" styleClass="apply_button" value="Create Leave">
<f:attribute name="userId" value="#{employee.name}"/>
</p:commandButton>
As #MikeBraun suggested, remove the window.reload(). If you want to refresh something, you could do it by using the update attribute from the p:commandButton.
And modify your bean according to this :
#ManagedBean
#SessionScoped // Could probably be moved to #RequestScoped or #ViewScoped
public class UserLeaveBean
{
#ManagedProperty(value="#{calendarBean}")
CalendarBean calendarBean;
public void setCalendarBean(CalendarBean calendarBean)
{
this.calendarBean = calendarBean;
}
public void addAppliedLeave(ActionEvent event)
{
System.out.println("Radio 1 : " + calendarBean.getRadioFirst());
System.out.println("Radio 2 : " + calendarBean.getRadioSecond());
}
}
The ManagedProperty will get the other bean accessible for you by injecting it inside the current one. Use the proper scope, probably you are using SessionScoped because you are using window.reload().
Important : the ManagedProperty bean must be at least scoped the same length as the other bean.
Read more :
Injecting Managed Beans in JSF 2.0
PrimeFaces Showcase - commandButton
I am new to jsf 2.0 and therefore i am facing a serious issue grouping the prime faces datagrid and radio buttons. I am using JSF 2.0-Primefaces 3.3, java 1.6, and running my application on tomcat server on windows operating system.
The issue is grouping data grid and radio button. The following paragraph will describe about an example code:
#ManagedBean(name="quickBill")
#ViewScoped
public class QuickBill extends BaseManagedBean implements Serializable {
private List<String[]> insurerIDs=null;
#PostConstruct
public void init(){
loadInsurer();
}
private void loadInsurer(){
logger.info("Entered Load Insurer");
insurerIDs = new ArrayList<String[]>();
if (null != insurerList) {
insurerIDs.add(new String[] {"InsurerID1","Insurer_Name1") });
insurerIDs.add(new String[] {"InsurerID2","Insurer_Name2") });
insurerIDs.add(new String[] {"InsurerID3","Insurer_Name3") });
insurerIDs.add(new String[] {"InsurerID4","Insurer_Name4") });
}
}
public List<String[]> getinsurerIDs() {
return insurerIDs;
}
}
The jsf code is as follows:
<p:dataGrid var="quickBillVar" value="#{quickBill.insurerIDs}" columns="4" >
<p:column selectionMode="single">
<p:selectOneRadio id="options" value="#{quickBill.selectedOption}">
<f:selectItem itemLabel="#{quickBillVar[1]}" itemValue="#{quickBillVar[1]}"/>
</p:selectOneRadio>
<p:commandLink id="insurerid" title="Isurer">
<p:graphicImage value="../../images/insurers1/#{quickBillVar[0]}.jpg"/>
</p:commandLink>
</p:column>
</p:dataGrid>
The above code when executed results in the display of the radio button, which allows user to select multiple radio button at the same time. However the requirement is to restrict user to select only one button rather than allowing user to select multiple button at a time. I have also used selectionMode="single" to produce the expected output but it didn't help much.
Kindly help me on this or provide me with examples which will overcome this issue.
I believe the custom layout in this example will help.
https://www.primefaces.org/showcase/ui/input/oneRadio.xhtml
You can try the below code using Map.
Backing bean code
String selectedInsurer;
Map<String,String> insurerIDs = new LinkedHashMap<String,String>();
insurerIDs.put("InsurerID1", "Insurer_Name1"); //(label, value)
insurerIDs.put("InsurerID2", "Insurer_Name2");
insurerIDs.put("InsurerID3", "Insurer_Name3");
insurerIDs.put("InsurerID4", "Insurer_Name4");
//-- getter & setter
At front end
<h:selectOneRadio value="#{quickBill.selectedInsurer}">
<f:selectItems value="#{quickBill.insurerIDs}" />
</h:selectOneRadio>
i'm trying to get a plain commandLink to work. Here is a code snippet of the page:
<div class="item-single">
<h:graphicImage value="image/screenshots/#{collectionListBean.collectionListTeaser[0].screenshot}" alt="Screenshot #{collectionListBean.collectionListTeaser[0].title}"/>
<div class="item-title">
<h:form id="teaser0">
<h:commandLink value="#{collectionListBean.collectionListTeaser[0].title}" action="#{collectionBean.showCollection(collectionListBean.collectionListTeaser[0].id)}" />
</h:form>
</div>
<div class="item-description">
<p>
<h:outputText value="#{collectionListBean.collectionListTeaser[0].persons.get(0).person.getFullName()}" />
</p>
</div>
</div>
The title is displayed correctly, so the backing bean and the list is available and accessible. CollectionBean is also available and accessible. The list has a fixed size and is used inside a javascript gallery which is the reason why i didn't use ui:repeat or h/p:dataTable elements.
I have also checked BalusC'S List of common problems
The action is not being invoked in the backing bean, I get following javascript error on the browser console:
Uncaught TypeError: Cannot read property 'teaser0:_idcl' of undefined
Here is the relevant code of the backing bean (collectionBean):
#Named("collectionBean")
#Scope("access")
#ViewController(viewIds = {ViewIds.EDIT_COLLECTION, ViewIds.SHOW_COLLECTION, ViewIds.EDIT_COLLECTION, ViewIds.METADATA_COLLECTION_ADMIN, ViewIds.EDIT_COLLECTION_EXISTING, ViewIds.COLLECTION_LIST, ViewIds.HOME})
public class CollectionBean extends CollectionBeanBase {
.
.
.
public String showCollection(long id) {
//Check if user is admin, if yes, allow to edit metadata
Authentication auth=SecurityContextHolder.getContext().getAuthentication();
this.collection = collectionService.findById(id);
if (!(auth instanceof AnonymousAuthenticationToken)){
role=auth.getAuthorities().iterator().next().getAuthority();
if(role.equalsIgnoreCase("ROLE_ADMIN")) {
this.collection.setEdit_flag(true);
return ViewIds.EDIT_COLLECTION;
}
}
return ViewIds.SHOW_COLLECTION;
}
Does anyone have an idea what the problem might be? Any hint is highly appreciated! thank you guys in advance!
This is commandLink then why are you passing value in method.
Means you can use
<f:param name="id" value="#{collectionListBean.collectionListTeaser[0].id}"/>
you can easily get that value in action.
like
public String showCollection() {
FacesContext fc = FacesContext.getCurrentInstance();
Object id = fc.getExternalContext().getRequestParameterMap().get("id");
System.out.println(id);
return ViewIds.SHOW_COLLECTION;
}
i think this is best way to do it.
I rearranged the element to wrap all of the div's affected by the jQuery gallery and now it works like a charm.