I'm playing with interactive chart by this topic:
enter link description here
Problem is, that I'm not able to show nothing else than Growl component.
The p:dialog hasn't been displayed:
<p:dialog id="dlg" header="TEST"/>
<p:chart type="bar" model="#{chartView.barModel}" widgetVar="chart">
<p:ajax event="itemSelect" listener="#{chartView.itemSelect}" update="dlg" />
</p:chart>
I've also tried (instead of update attribute):
onComplete="PF('dlg').show();"
onComplete="PF('#form\\:dlg').show();"
onclick="PF('dlg').show();"
onclick="PF('#form\\:dlg').show();"
How can I show for example dialog box with som sub-chart related to selected item?
To display the dialog box use something like this.
<p:dialog id="basicDialog" widgetVar="dlg" header="TEST" />
then call display the dialog as.
oncomplete="PF('dlg').show();"
No need to update the dialog tag.
Related
Primefaces 7.0, primefaces-extensions 7.0.2, JSF 2.1.19
Hello,
I want to use pe:blockUI for p:dialog and I figured out I can not use the "normal" outside blockUI I use in the whole application, because it does not block the dialog and so the user can click random stuff during the ajax request. So I use a separate blockUI element in the dialog to also block the dialog inputs.
That is working, the only problem I have is that he message part of the blockUI ("please wait") should be gone without any replacement (because the general blockUI message works fine and two are too much).
How can this be done?
<p:dialog id="antragKoopUserSearch" widgetVar="antragKoopUserSearch" height="555" width="830" modal="true" closable="true">
<f:facet name="header">Benutzer suchen zum Weitergeben</f:facet>
<h:form id="modalPanelForm">
<pe:blockUI id="buiModal" widgetVar="buiModal" target="antragKoopUserSearch" />
<p:ajaxStatus id="antragKoopUserSearchStatus" onstart="PF('buiModal').block();" oncomplete="PF('buiModal').unblock();" />
thx
You can hide it like this:
<pe:blockUI css="{opacity: 0}">
asd
</pe:blockUI>
You do need that "asd" there or at least something, otherwise it won't work, at least on my version 6.1.1.
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 am using the following code to remove the file uploaded using primefaces.
<p:column width="35" headerText="Delete" style="text-align:center">
<h:commandLink ajax="true" update="#form" title="Delete Document"
process="#form" action="#{learningGuaranteeBean.deleteDocument()}"
disabled="#{(learningGuaranteeBean.activeEntry.statusCode ne 3) and (learningGuaranteeBean.activeEntry.statusCode ne null)}">
<f:setPropertyActionListener
target="#{learningGuaranteeBean.selectedDocument}"
value="#{doc}"></f:setPropertyActionListener>
<h:graphicImage value="../images/icons/delete.gif"></h:graphicImage>
</h:commandLink>
</p:column>
But what happens is, when I delete a attached file, the entire jsf page is reloaded, so the data which are entered in the input fields disappear when I remove the attached file. Could anyone assist me to prevent this please?
You seem to be using h:commandLink instead of p:commandLink by mistake. Since h:commandLink doesn't even have the process, update, ajax attributes, this results in a non-AJAX submit, hence the page reload.
Use p:commandLink.
If you need h:commandLink for some reason, then substitute the erroneous attributes for a proper f:ajax tag.
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">
In reference to the query that I have posted
Primefaces Dialog box - show it conditionally. javascript code not working
The problem is that when
<p:outputPanel id="dialogPanel"
rendered="#{not reqSearchHandler.accStatusFlag}">
is not rendered as rendered turns out to be FALSE , then when I click on the commandbutton , its keep on clocking and I am not able to go the next page , it seems that ajax request is never getting completed as oncomplete="dlg3.show()" needs dialog box in the page.As rendered turns out to be false , it never finds dlg3.
<p:commandLink id="addRequest" immediate="true" value="addreq"
oncomplete="dlg3.show()" update="dialogPanel">
<f:setPropertyActionListener
value="#{searchHandler.selectedAccIns}"
target="#{reqSearchHandler.checkAccStatus}" />
</p:commandLink>
Can somebody please help me how to avoid opening dialog box when a particular condition is false. Any Idea?
Is the dlg3 inside of dialogPanel? Why don't you post the complete code?
If so, then just before calling dlg3.show)(), change the rendered condition to true (e.g. by adding action listener) or just move the dialog outside the panel.