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.
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
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">
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.
I have an iFrame in my page looking like this:
<h:panelGroup id="gameDiv">
<f:verbatim>
<iframe src="/levelup/resources/#{cc.attrs.src_dir}/#{cc.attrs.src_html}" width="700px" height="800px" frameborder="0" id="gameFrame">
</iframe>
</f:verbatim>
</h:panelGroup>
Basically, the "src" variable is bound using JSF 2.0 EL, and gets its value from a backing bean.
I then use a form to update this value, and refresh the whole page. In the rendered HTML, I can see that the "src" for my div has been updated. However, the HTML page still shows the old one.
I thought the issue was similar to 2 iframes with the same display even if the src are different, and I tried the solutions that have been mentioned (using a timestamp to make the src unique, or resetting them to "about:blank" on each page load). None of them worked however.
For information, the form that updates the backing bean is:
<h:form id="gameSelectionForm">
<h:selectOneMenu id="gameSelection">
<f:selectItems value="#{gameBean.gameIds}" />
</h:selectOneMenu>
<p:commandButton id="gameSelector" action="#{gameBean.changeGame}" update="gameScoreFieldset, gameDiv" />
</h:form>
Any hint would be much useful.
Thanks in advance,
Sébastien
You're changing the src of the iframe using JS/Ajax, but not reloading its content.
There are 2 ways to fix this:
Just don't use JS/ajax. A synchronous HTTP request will reload the entire document and thus automagically reload the iframe.
<p:commandButton ajax="false" />
Use JS to force reload. Add the following after the <iframe>.
<script>document.getElementById('gameFrame').location.reload()</script>
Oh, you definitely need to remove the <f:verbatim>. Since JSF 1.2 that tag is utterly useless.