How does this code in the PrimeFaces DataTable row selection work?
<p:commandButton update=":form:display" oncomplete="confirmation.show()" image="ui-icon ui-icon-close" title="Delete">
<f:setPropertyActionListener value="#{car}" target="#{tableBean.selectedCar}" />
</p:commandButton>
I am confused by the following: update=":form:display", and image="ui-icon ui-icon-close".
Is this inbuilt into Primefaces? or do I need to create an additional form, or have an external image mapped to it?
update=":form:display" refers to a specific element on the page. The first ':' goes to the root of the page, so there needs to be a component with the id "form" (probably a form) and inside that a component with the id "display". This means after the button actions has completed :form:display will be updated. Note that it's generally not a great idea to use absolute paths as they can be hard to keep up to date when you change the page structure. If the button is on the same level as the "display" component you could just do update="display", or you can do things like update="#form" to update the entire current form.
image="ui-icon ui-icon-close" refers to style classes in your css. These two comes predefined with primeface, but if you want to use custom graphics you can also define your own style classes for them.
Related
Primefaces (5.2, Mojarra 2.2.13) inside Dialog Framework is not opening a <p:confirm>-MessageBox.
I have delete icons in a datatable as a <p:commandLink> per row inside a Dialog.
I want to have a user confirmation to delete every row.
Following code works as expected in a <p:dialog> but not using Dialog Framework. Dialog Framework blocks the click on the delete icon or in other words: shows the confirm box invisible and answers NO.
<p:dataTable id="idTblMfc" value="#{bnMfcs.rows}" var="ORow" editable="true" ...>
... Columns ...
<p:column>
<p:commandLink styleClass="ui-icon ui-icon-trash" title="#{msg.TXT_DELETE}" actionListener="#{bnMfcs.doDelete(ORow)}" update="idTblMfc">
<p:confirm header="#{msg.TXT_DELETE}" message="#{msg.PRM_DEL_CONT_MARKED}" icon="ui-icon-alert" />
</p:commandLink>
</p:column>
I tried the same with <p:confirmDialog> instead of <p:confirm> with the same result. OK, I found the tiny difference that <p:confirmDialog> doesn't block the delete icon click but also does not appear.
The rest of the dialog and the datatable works as expected even with message boxen shown with showMessageInDialog(...).
Any ideas?
As you can see in the showcase (http://www.primefaces.org/showcase/ui/overlay/confirmDialog.xhtml), you need both p:confirm (where you need confirmation) and p:confirmDialog (which defines how the dialog looks like).
Also make sure that you are in a h:form tag.
Solution found!
The documentation makes not clear that <p:confirmDialog> is mandatory. I had one on my main page and the page using Dialog Framework had not.
I have a simple button,
<h:panelGroup>
<p:commandButton rendered="#{myBean.checkboxSelected}" value="Action" />
</h:panelGroup>
which is set to false and has getters and setters in the bean, that I want to toggle its rendered attribute (or hide/show it) based on whether ANY checkbox inside my p:dataTable is selected. Conversely, if I check one box and uncheck it, I want to be able to hide button as no checkboxes are selected.
My p:dataTable is set up like this.
<p:dataTable id="someID"
selection="#{myBean.mySelectList}"
rowKey="#{myBean.id}">
<p:column selectionMode="multiple" style="text-align:center"/>
....
</p:dataTable>
Any help is appreciated
Short answer: update it when there is more than one item selected.
Longer answer: On each selection, update the number of items server side (or just count the list) and use that value in a 'rendered' attribute of the button (check if > 0, or do that server side and use a boolean) and update the panelgroup on each ajax call or do that from the server as well.
All plain 'logic' when using JSF, nothing special, nothing fancy
I have below code for primefaces p:commandButton. I have set update and oncomplete attributes to disable commandButton in p:panelGrid of "panelGrid1s4a3b1" and show messages on p:message of "customMessage1s4". But does not know why these two not working. Anyone can help me to make them work?
<p:commandButton id="cmdVerify1s4a2" widgetVar="cmdVerify1s4a2"
value="Verify" action="approveProfileQualifications"
update="#([id$=panelGrid1s4a3b1]), #([id$=customMessage1s4])"
oncomplete="PF(cmdVerify1s4a2).disable(); PF('cmdReject1s4a2').disable();"/>
You are not updating is right. Change your p:commandButton little
update="panelGrid1s4a3b1 customMessage1s4"
while I believe your p:messages like
<p:messages id="customMessage1s4" showDetail="true" autoUpdate="true" closable="true" />
MORE
You can also use keywords to update:
Keywords are the easier way to reference components, they resolve to ids so that if an id changes,
the reference does not need to change. Core JSF provides a couple of keywords and PrimeFaces
provides more along with composite expression support.
Following are the keywords.
#this Standard Current component. #all Standard Whole view. #form
Standard Closest ancestor form of current component. #none Standard No
component. #namingcontainer PrimeFaces Closest ancestor naming
container of current component. #parent PrimeFaces Parent of the
current component. #composite PrimeFaces Closest composite component
ancestor. #child(n) PrimeFaces nth child. #row(n) PrimeFaces nth row.
#previous PrimeFaces Previous sibling. #next PrimeFaces Next sibling.
#widgetVar(name) PrimeFaces Component with given widgetVar.
Scenario: I used component and infront of autcomplete I used one command link with search image.
My purpose is to display cursor in autocomplete after clicking on commandlink.
My code is as follows:
Autocomplete:
<p:autoComplete id="senderAutocomplete" widgetVar="senderInfo"
value="#{customerReviewLazyDataModel.customerReviewVO.senderVO}"
completeMethod="#{customerReviewLazyDataModel.searchOrganizations}"
var="senderVO"
itemValue="#{senderVO}" converter="organizationConverterForCustomerReview"
size="60">
commandlink
<p:commandLink oncomplete="setFocus()" ajax="true">
<p:graphicImage value="/app-resources/themes/yob/images/search.png" style="margin-bottom: -4px;"></p:graphicImage>
</p:commandLink>
js function
function setFocus(){
document.getElementById("senderAutocomplete").focus();
}
Is there any solution for this problem?
The ID you are using to get the DOM-element for the input to focus is wrong. First of all you have to consider the id of the form. Additionally the id of the input of a p:autoComplete has a suffix _input. So use this:
document.getElementById("formId:senderAutocomplete_input").focus();
You should also set process="#this" on the commandButton, as you are just using it to focus the autoComplete.
I solved this problem adding a css style class and using jquery (which is included on Primefaces) to set the focus.
<p:autoComplete id="senderAutocomplete" widgetVar="senderInfo" ...
*styleClass="focusme"*
/>
And the commandlink would be like this:
<p:commandLink *oncomplete="$('.focusme').focus()"* ajax="true">
I have a tabView component and in each tab panel, I have a form.
I have also a flag image to change locale in my application and when it's clicked, I want to reload all tabView with new locale changes.
In one form in a tab panel, I use captcha component and I don't want to reload it because...it's impossible without all reload page (doesn't support partial Ajax reloading, I will use Recaptcha.reload() JS to do the job of reloading).
So I want to reload all my tabView component nested in panel component named...panel without my captcha.
my tabView is nested in panel named panel
my captcha has id captcha
My 2 locale change buttons are these one :
<p:commandLink update="#(:panel:not(captcha))" rendered="#{locale.locale != 'fr'}">
<h:graphicImage url="resources/images/flags/flag_fr.png" width="30" height="30" />
<f:setPropertyActionListener target="#{locale.locale}" value="fr" />
</p:commandLink>
<p:commandLink update=":panel" rendered="#{locale.locale != 'en'}">
<h:graphicImage url="resources/images/flags/flag_en.png" width="30" height="30" />
<f:setPropertyActionListener target="#{locale.locale}" value="en" />
</p:commandLink>
I have tested much combinaisons of selectors inside update attribute but without success.
Any selector idea please ? Thanks a lot
When you are using PFS you are referencing client id of the componenets. For example if client id of your panel is :panel, your selector will be #(#\\:panel) (you have to escape semicolon). Inspect your generated html and find out real client ids of your components. If the component is in naming container id of container is concatenated before id of child compoenent. For example if panel is naming container of your captcha it would be something like: #(#\\:panel:not(#\\:panel\\:captcha)). Forms are also naming container so probably your ids will have something more near this.