Lets assume i have next graphic image tag inside a form
<p:lightBox styleClass="imagebox " id="imageLightBox" rendered="true">
<h:outputLink value="http://..../center/#{myBean.centerId}/picture" title="Bla bla bla">
<h:graphicImage value="http://..../center/#{myBean.centerId}/picture" />
</h:outputLink>
</p:lightBox>
and i have next primefaces command button
<p:commandButton icon="fa fa-save" value="Save" title="Save" actionListener="#{myBean.saveCenterImage()}" update="#form" >
So how can i re-render graphicImage when i click on commandButton.
I think you need to use p:graphicImage instead of h:graphicImage and set the attribute cache=false so that the browser will not cache the image.
Related
I have a InputText inside a Dialog as:
<p:dialog header="Demo Header"appendTo="#(body)"
widgetVar="sectionDialog" id="section_Dialog"
modal="true">
<h:panelGroup id="myPanel">
<h:panelGrid columns="4">
<h:outputLabel value="Count: "/>
<pe:keyFilter mask="num" for="count" />
<p:inputText id="count"
value="#{myBean.countValue}" converter="spaceConverter">
</p:inputText>
<p:commandButton id="btnId" process="#this"
update="secondPanel" value="ADD" icon="ui-icon-check"
action="#{myBean.generateDataTableBasedOnCount()}" ajax="true"
partialSubmit="true">
</p:commandButton>
</h:panelGrid>
</h:panelGroup>
<h:panelGroup style="border:0" id="secondPanel">
...// data table generated based on Input Count.
</h:panelGroup>
</p:dialog>
If I keep the InputText and Button outside the dialog, it works like a charm.
But when I keep them inside the Dialog, myBean.countValue always stores the previous input value.
When I refresh the page and enter a new value, Old Value is being stored in the bean.
What am I missing here?
PrimeFaces : 5.3
PrimeFaces-Extension : 4.0.0
JSF : 2.2.8
You need to ResetInput of the dialog before you open it.
See: https://www.primefaces.org/showcase/ui/misc/resetInput.xhtml
So on the button that opens your dialog... Its better to reset the FORM but I didn't see the h:form in your example code above.
<p:commandButton value="Open Dialog" update="section_Dialog">
<p:resetInput target="section_Dialog"/>
</p:commandButton
I have an inputTextArea in a dialog and wanted that the bean property shouldn't be sent/changed when the user clicks on the cancel button, but it does.
<p:dialog header="Notizen" id="paketNotizenDialog" modal="true"
widgetVar="paketNotizenDialogWV">
<h:form>
<p:panelGrid columns="1">
<p:inputTextarea scrollHeight="200" rows="6" cols="33" autoResize="false"
value="#{paketErstellenDialogController.selectedPaket.notiz}" />
</p:panelGrid>
<p:commandButton value="Save" process="#form" oncomplete="PF('paketNotizenDialogWV').hide();"/>
<p:commandButton value="Cancel" oncomplete="PF('paketNotizenDialogWV').hide();" process="#none" update="#none" />
</h:form>
</p:dialog>
The button which opens the dialog:
<p:commandButton id="notizEintragButton" value="T" process="#this"
onclick="PF('paketNotizenDialogWV').show();" />
Any hints? Thanks in advance.
As you are using the commandButton, the default behaviour would be to submit the enclosing form with ajax request.
I suspect what you want to do here is to reset the form input and close the dialog. In that case you should go for the type="reset" which according to the primefaces doc:
Reset buttons do not submit the form, just resets the form contents.
And once that is done, trigger your closing javascript code:
<p:commandButton value="Cancel" type="reset"
onclick="PF('paketNotizenDialogWV').hide();"/>
If you do not want to reset the form, just close the dialog then use:
<p:commandButton value="Cancel" type="button"
onclick="PF('paketNotizenDialogWV').hide();"/>
Which according to the primefaces doc would:
Push buttons are used to execute custom javascript without causing an
ajax/non-ajax request. To create a push button set type as "button"
Update
If you want to reset the values from the backing bean then use reset input fields functionality of primefaces.
In your case it would be something like:
<p:panelGrid columns="1">
<p:inputTextarea id="input" scrollHeight="200" rows="6" cols="33" autoResize="false"
value="#{paketErstellenDialogController.selectedPaket.notiz}" />
</p:panelGrid>
<p:commandButton value="Cancel" oncomplete="PF('paketNotizenDialogWV').hide();"
process="#this" update="input" >
<p:resetInput target="input" />
</p:commandButton>
just add type="button" and remove process="#none" update="#none"
from <p:commandButton value="Cancel" oncomplete="PF('paketNotizenDialogWV').hide();" process="#none" update="#none" />
I have a overlay panel for a selection of values for an input text.
If the overlay panel is appended to body it is displayed correctly and lays over the dialog. But in this case the ajax listner inside the overlay panel is only fired once. The second time (and all other times) the backing bean method is not executed from the listener.
When I change appendToBody to false, the ajax listener inside the overlay panel fires every time, but the overlay panel is not display over the border of the dialog. Is there a solution for this? Tried to play with z-index without success.
Edit:
With the following overlay panel code it works:
<!-- if overlay is appended to body, it works only once -->
<p:overlayPanel widgetVar="#{widgetVar}" appendToBody="false" styleClass="clSelectionPanel" dynamic="true">
<p:tree value="#{clContentController.getClRoot()}" var="element"
selectionMode="single" draggable="false" droppable="false" dynamic="true">
<p:ajax event="select" onstart="PF('#{widgetVar}').hide();" oncomplete="hitlistTableResized();"
listener="#{clContentController.ok(element)}" immediate="true" update="#(.#{updateClass})" />
<p:treeNode ...
</p:tree>
</p:overlayPanel>
On input text with buttons to add value and clear value:
<p:inputText value="#{curProperty.value}" readonly="true"
required="#{curExtendedEntryField.required}" styleClass="editMaskChoiceInput">
</p:inputText>
<p:commandButton immediate="true"
actionListener="#{clController.setSelectedObject(curProperty)}"
oncomplete="PF('clSelectionPanelEditVar').loadContents('#{component.clientId}');"
title="Add Value" process="#this" />
<p:commandButton immediate="true"
actionListener="#{editPropertyBL.clearCSelection(curProperty)}"
title="Clear Value" update="#(.editMaskChoiceInput)" />
The trick in my case was to inclusion the overlay panel. I have done this in the input text field iteration before, but now I define it under the form:
<h:form id="editPropertyFormId">
<ui:include src="/sections/dialog/editPropertyDialog.xhtml" />
<ui:include src="/sections/dialog/clSelectOverlay.xhtml">
<ui:param name="widgetVar" value="clSelectionPanelEditVar" />
<ui:param name="updateClass" value="editMaskChoiceInput" />
</ui:include>
Regards
Oliver
The code below works for me. Include your code and the JSF/Primefaces version you are using.
<p:dialog closable="true"
visible="true">
<h:form>
<p:inputText id="inputtext">
</p:inputText>
<p:overlayPanel for="inputtext">
<p:commandButton value="Click to test">
<p:ajax oncomplete="alert('test');"/>
</p:commandButton>
Overlay content
</p:overlayPanel>
</h:form>
</p:dialog>`
I want to expand/collapse a fieldset from buttons that are outside and inside of the fieldset, The problem is that not always the effect is the desired one. Some times the fieldset expands and collapses in a blink of an eye, sometimes it remains always open. However if a click in another button wich is not related with the fieldset, it seems that "reset" the state, and buttons starts to work fine for a while, till , for example, when the form validation fails.
Here is the whole XHTML.
I suspect this is because any AJAX issue
Thanks very much in advance
<p:fieldset id="fs_new_po"
widgetVar="fs_new_po"
legend="#{msg['btn_add_po.manage_po']}"
toggleable="true"
toggleSpeed="500"
collapsed="true">
....
<p:column>
<p:commandButton process="#this"
update=":mng_po:fs_new_po :mng_po:msgs"
value="#{msg['btnCancel']}"
onclick="PF('fs_new_po').toggle();"
actionListener="#{managePO.btnCancelClick}"/>
</p:column>
</p:row>
</p:panelGrid>
</p:fieldset>
...
<p:commandButton process="#this"
update=":mng_po:fs_new_po"
oncomplete="PF('fs_new_po').toggle();"
icon="ui-icon-pencil"
title="edit"
action="#{managePO.btnEditClick}">
<f:setPropertyActionListener value="#{po}" target="#{managePO.selectedPo}"/>
</p:commandButton>
Following the suggestion of Tiny, I update onclick event just the content of the fieldset that could be change.
<p:fieldset id="fs_new_po"
widgetVar="fs_new_po"
legend="#{msg['btn_add_po.manage_po']}"
toggleable="true"
toggleSpeed="500"
collapsed="true">
//ADDED A CONTENT INSIDE THE FIELDSET TO BE UPDATED
<p:panelGrid id="fs_cntnt">
....
<p:column>
//UPDATE JUST THE CONTENT OF THE FIELDSET
<p:commandButton process="#this" update=":mng_po:fs_cntnt :mng_po:msgs" value="# {msg['btnCancel']}" onclick="PF('fs_new_po').toggle();" actionListener="#{managePO.btnCancelClick}" />
</p:column>
</p:row>
</p:panelGrid>
</p:fieldset>
...
//UPDATE JUST THE CONTENT OF THE FIELDSET
<p:commandButton process="#this" update=":mng_po:fs_cntnt" oncomplete="PF('fs_new_po').toggle();" icon="ui-icon-pencil" title="edit" action="#{managePO.btnEditClick}" >
<f:setPropertyActionListener value="#{po}" target="#{managePO.selectedPo}" />
</p:commandButton>
Thank you Tiny!
i have just 2 xhtml pages . first page contains a form with a button and i have set the navigation rule in such a way that upon this button click , i'm just returning "success" from the backing been and as a result the second page opens which contains the accordion panel . But the problem is , after the page has been loaded the page freezes and you know the tabs present in the accordion panel cannot be expanded . (i.e) accordion panel fails to work.
page 1:
<h:form>
<p:commandButton action="#{Bean.check}" value="click"></p:commandButton>
</h:form>
page 2:
<h:form>
<p:accordionPanel activeIndex="#{Bean.store}">
<p:tab title="tab1">
<h:commandLink value="click"></h:commandLink>
<br />
<h:commandLink value="next"></h:commandLink>
<br />
<h:commandLink value="previous"></h:commandLink>
</p:tab>
<p:tab title="tab2" id="jun" >
<p:commandLink value="click" action="override.xhtml"
>
<p:effect event="click" type="highlight"></p:effect>
</p:commandLink>
<br />
<p:commandLink value="next" action="header.xhtml"></p:commandLink>
<br />
<p:commandLink value="previous"></p:commandLink>
</p:tab>
<p:tab title="tab3">
<h:commandLink value="click"></h:commandLink>
<br />
<h:commandLink value="next"></h:commandLink>
<br />
<h:commandLink value="previous"></h:commandLink>
</p:tab>
</p:accordionPanel>
</h:from>
Thanks in Advance
This usually happens when there is no value coming form ManagedBean.
Verify if the #{Bean.store} is generated correctly or not.
Or remove acticeIndex attribute.