I need to set some values in my model and navigate page to another one but nothing happens on button click(neither page navigated nor method triggered)....My code works perfect outside the carousel but inside carousel its doesn't work(no page navigation)
<p:carousel value="#{catalog.getServices()}" var="s" rows="1">
<h:outputLabel for="id" value="Service ID " />
<h:outputText id="id" value="#{s.id}" />
<br></br>
<h:outputLabel for="name" value="Service Name" />
<h:outputText id="name" value="#{s.name}" />
<br />
<h:commandLink action="detail">
<f:setPropertyActionListener value="#{s}" target="#{sh.currentService}" />
<h:commandButton value="getService" style="float:right;" />
</h:commandLink>
</p:carousel>
And my navigation works perfect outside this carousel
<h:commandLink action="detail">
<f:setPropertyActionListener value="#{s}" target="#{sh.currentService}" />
<h:commandButton value="getService" style="float:right;" />
</h:commandLink>
Above code can make my page navigate and method which I want to trigger is also working fine
You should avoid nesting h:commandButton inside h:commandLink.
Simply use h:commandButton this way:
<h:commandButton value="getService" action="#{yourBean.yourActionMethod}">
<f:setPropertyActionListener .../>
</h:commandButton>
And in your backing bean return the navigation target as result from the action method:
public String yourActionMethod() {
// do your stuff here
return "detail";
}
Try to put the commandButton inside p:column. I had this issue and here http://forum.primefaces.org/viewtopic.php?f=3&t=16120 helped me.
Related
I need to show and hide component in my JSF 2-PrimeFaces application, please find my code below for the same:
<p:outputLabel for="online_offer" value="Online offer#{msg._question_mark}" styleClass="font-size-1em font-weight-bold input-panel-main" />
<p:panel>
<h:panelGrid columns="1">
<p:selectBooleanButton id="online_offer" value="#{QckPstBen.offer.isExpired}" onLabel="Yes" offLabel="No" onIcon="ui-icon-check" offIcon="ui-icon-close" >
<f:ajax event="click" render="#form" />
</p:selectBooleanButton>
</h:panelGrid>
</p:panel>
<h:outputLabel value=" " />
<h:panelGroup rendered="#{QckPstBen.offer.isExpired}">
<p:outputLabel for="website" value="Website/link to the offer#{msg._colon}" styleClass="font-size-1em font-weight-bold input-panel-main" />
<p:panel>
<h:panelGrid columns="1">
<p:inputText id="website" required="true" size="38" />
<p:watermark for="website" value="www.discountbox.in" />
</h:panelGrid>
</p:panel>
</h:panelGroup>
But it doesnt work, any clue
PrimeFaces components doesn't support <f:ajax>. Use <p:ajax> instead.
<p:selectBooleanButton ...>
<p:ajax update="#form" />
</p:selectBooleanButton>
Note that I omitted the event attribute, it defaults here to click already.
Place rendered on children of <h:panelGroup> instead or place a container of some sort around it, for example p:panel.
This may be OBE by now but...
When referencing the page bean, don't I recall in the #{} context, the convention of using lowercase for class names and method/attributes of the page bean (i.e. not #{QckPstBen.offer.isExpired} but #{qckPstBen.offer.isExpired}?
I have a list of links rendered in a loop. On click of the link I want to set a bean property selectedIndex. I am trying to do it by passing it on Ajax parameter, but the full form is getting refreshed. Even then the notificationPreferencesBean.retrievePreferences is not getting fired. Is this approach correct?
Here is my template snippet:
<ui:repeat value="#{notificationPreferencesBean.userNotificationPreferences}"
var="userNotificationPreferenceVar" varStatus="idx">
<li>
<h:commandLink
value="#{userNotificationPreferenceVar.notificationClassName.label}"
styleClass="#{userNotificationPreferenceVar.cssClassName}"
action="#{notificationPreferencesBean.retrievePreferences}">
<f:ajax execute="#form" render="#none">
<f:param value="#{idx}" name="idx" />
</f:ajax>
</h:commandLink>
</li>
</ui:repeat>
and here is the bean declaration:
#ManagedProperty(value = "#{param.idx}")
private Integer selectedIndex;
Interestingly the following code works Ajaxfully but it just calls the notificationPreferencesBean.retrievePreferences and doesn't set the selectedIndex(as expected because I am not passing any param)
<ui:repeat value="#{notificationPreferencesBean.userNotificationPreferences}"
var="userNotificationPreferenceVar" varStatus="idx">
<li>
<h:commandLink
value="#{userNotificationPreferenceVar.notificationClassName.label}"
styleClass="#{userNotificationPreferenceVar.cssClassName}"
action="#{notificationPreferencesBean.retrievePreferences}">
<f:ajax execute="#form" render="#none" />
</h:commandLink>
</li>
</ui:repeat>
Is there any other way of doing it?
I just want to set selectedIndex property on click of the link ajaxfully.
You don't need to use the annotation #ManagedProperty for that.
Just use a f:setPropertyActionListener:
<ui:repeat value="#{notificationPreferencesBean.userNotificationPreferences}"
var="userNotificationPreferenceVar" varStatus="idx">
<li>
<h:commandLink
value="#{userNotificationPreferenceVar.notificationClassName.label}"
styleClass="#{userNotificationPreferenceVar.cssClassName}"
action="#{notificationPreferencesBean.retrievePreferences}">
<f:setPropertyActionListener value="#{idx}"
target="#{notificationPreferencesBean.selectedIndex}" />
<f:ajax execute="#form" render="#none" />
</h:commandLink>
</li>
</ui:repeat>
I have a from like this
<h:form id="logForm" prependId="false">
<div class="leftcol">
....
<h:commandButton value="Apply Filters"
action="#{exporterReview.applyFilterAction}">
</h:commandButton><br></br><br></br>
....
</div>
<div class="rightcol1" >
<p:dataTable var="exporter"
value="#{exporterReview.exporters}"
paginator="true" rows="5"
height="400" paginatorPosition="top"
emptyMessage="#{exporterReview.noExporterFound}">
<p:column>
<div style="....">
<h:graphicImage value="#{exporter.imgPath}" />
</div>
<div style="...">
<h:commandButton value="Update"
action="#{exporterReview.updateExporter}"
rendered="#{login.updateState}"
style="... ">
<f:param name="exporterid"
value="#{exporter.exporterId}" />
</h:commandButton>
</div>
<div class="arrowbuttons">
<span class="arrow"></span>
</div>
<p:spacer height="10" width="20"/>
<h:commandButton value="#{exporter.organizationName}"
action="#{exporterReview.viewExporter}"
style="...">
<f:param name="exporterid" value="#{exporter.exporterId}" />
<f:param name="disableLink" value="#{exporter.disableLink}" />
</h:commandButton>
<div style='padding-top:10px'>
<h:outputLabel value="City: " style="color: #1c6ace;"/>
<h:panelGroup rendered="#{not exporter.disableLink}">
<h:commandLink value="#{exporter.cityName}"
style="text-decoration: underline"
disabled="#{exporter.disableLink}"
onclick="openCityPopup(#{exporter.cityId});" >
</h:commandLink>
</h:panelGroup>
<h:panelGroup rendered="#{exporter.disableLink}">
<h:outputText value="#{exporter.cityName}"></h:outputText>
</h:panelGroup>
</div>
<div style='padding-top:3px'>
<h:outputLabel value="Email Address: " style="color: #1c6ace;"/>
<a href="mailto:#{exporter.emailAddress}">
<h:outputText value="#{exporter.emailAddress}"
style="..">
</h:outputText>
</a>
</div>
<div style='padding-top:3px'>
<h:outputText value="#{exporter.categoryDesc}"
escape="false" />
</div>
<div class="horizontalline"></div>
</p:column>
</p:dataTable>
</div>
</h:form>
Here is the filter method
public void applyFilterAction() {
....
//Setting whereParam so that whenever user navigate from page And return back
// the grid is populated with the previous search criteria
session.setAttribute("settingWhereParam", whereParam);
getExporterGrid();
} //end of applyFilterAction
private void getExporterGrid() {
....
exporters.add(new Exporter(Datatable values));
} //end of getExporterGrid
The problem is when i am on first page and do the search then every thing works fine. Here is the first picture.
Then if i apply search then it becomes
But if i do pagination , say go to page 4 and then apply the search then no result shows
But then nothing show
Why it is happening? What i am doing wrong ? I am using Prime faces 2.2. Its an old program.
Thank you
I'm not sure if this will work in primefaces 2.2, but in version 3+, you can specify an update attribute.
Your commandButton would look like this:
<h:commandButton value="Apply Filters" action="#{exporterReview.applyFilterAction}" update="#form">
I did it :). Actually i did a workaround. What i did, i used onClick event on my filter Button. Like
<h:commandButton id="filterButton"
value="Apply Filters"
style=""
action="#{exporterReview.applyFilterAction}"
onclick="filterButtonClick(event)" />
Now when button is clicked, then first my client side code will run. So i get all the values and then using ajax call the servlet, and save the result in session object. After that my server side code will run, and my action method invoked, in which i simple return the url of the same page.
public String applyFilterAction() {
return "Exporter_Review?faces-redirect=true";
} //end of applyFilterAction()
Now when page invoke i simply check for the result in the session. And if session object present then simply get the values from that object and shows the result. And when i leave the page i simply put null in the session against object, now default is used. Now everything is working fine :)
For what reason facesContext.validationFailed could be null? (in a postBack where there are errors..)
I had to resort to an ugly if (#{fn:containsIgnoreCase(facesContext.maximumSeverity,'ERROR')}) showSecurePopup('confirm'); because facesContext.validationFailed is coming back null..
the test code is:
<h:form>
<h:messages />
<br></br>
<h:outputText value="Validation failed: #{facesContext.validationFailed}" />
<br></br>
<h:outputLabel for="field1" value="Test Field" />
<br></br>
<h:inputText required="true" />
<h:commandButton action="#{contactBacking.submitComment}" value="Submit"
<f:ajax render="#form" execute="#form" />
</h:commandButton>
</h:form>
EDIT: Edited as per #BalusC's answer.. and took screenshot of result:
The FacesContext#isValidationFailed() returns a boolean which is never null. Just get rid of that nonsensicial nullcheck.
<h:outputText value="Validation failed: #{facesContext.validationFailed}" />
I have a form and two command buttons. I want that on pressing the enter key, the second commandButton is pressed, but the first commandButton is being pressed.
Please consider the following sample code.
<h:form>
<p:inputtext value="#{bean.mobileNumber}" />
<p:commandButton id="startNewChat" value="Chat" action="#{bean.startNewChat}" update="chatWindow" />
<br />
<br />
<p:outputPanel id="chatWindow">
<p:inputTextarea readonly="true" value="#{bean.chatMessages}" />
<p:inputText value="#{bean.newChatMessageFromWeb}" />
<p:commandButton id="submitChatMessage" action="#{bean.submitChatMessage}" value="Send Message" />
</p:outputPanel>
</h:form>
When Enter key is pressed, first commandButton(with id="startNewChat") is pressed, but I want that second commandButton(with id="submitChatMessage") should be pressed.
What I have tried: accesskey="13", type="submit", id="submit"
I assume that you want to apply this on the second input field, in that case you need to capture the keypress event and invoke the button by JS when the key code is 13.
<form id="form">
...
<p:inputText value="#{bean.newChatMessageFromWeb}" onkeypress="if (event.keyCode == 13) { document.getElementById('form:submitChatMessage').click(); return false; }" />
<p:commandButton id="submitChatMessage" action="#{bean.submitChatMessage}" value="Send Message" />
(note that I added an id to the <h:form> so that the command button gets a fixed ID which is selectable by JS, also note the return false, this will block the default button from getting fired)
A more clean way would be to put each form in its own <h:form>.
<h:form>
<p:inputtext value="#{bean.mobileNumber}" />
<p:commandButton id="startNewChat" value="Chat" action="#{bean.startNewChat}" update=":chatWindow" />
</h:form>
<p:outputPanel id="chatWindow">
<h:form>
<p:inputTextarea readonly="true" value="#{bean.chatMessages}" />
<p:inputText value="#{bean.newChatMessageFromWeb}" />
<p:commandButton id="submitChatMessage" action="#{bean.submitChatMessage}" value="Send Message" />
</h:form>
</p:outputPanel>
It's like that in html. The submit button that comes first in markup is the one activated with enter. Try setting
type="button"
on the first command button, if that doesn't work, you don't have much choice except maybe reordering your buttons and styling them so that one appears before another, or as BalusC said capturing keypresses with js.
If your inputText and submit buttons are inside the same form, put this inside the form
<p:defaultCommand target="yourButtonId" />
the enter key will trigger the button with the target id.
In case of the op's question, just putting that line at the end of the form with the desired button's id as the target would solve the problem.
<h:form>
<p:inputtext value="#{bean.mobileNumber}" />
<p:commandButton id="startNewChat" value="Chat" action="#{bean.startNewChat}" update="chatWindow" />
<br />
<br />
<p:outputPanel id="chatWindow">
<p:inputTextarea readonly="true" value="#{bean.chatMessages}" />
<p:inputText value="#{bean.newChatMessageFromWeb}" />
<p:commandButton id="submitChatMessage" action="#{bean.submitChatMessage}" value="Send Message" />
</p:outputPanel>
<p:defaultCommand target="submitChatMessage" />
</h:form>