refreshing content inside dialogue box through JavaScript function - jsf-2

I am stuck over a problem While dealing with primefaces charts.
Problem
When I click on a lineChart, a dialogue should appear which contains another linechart.
Sample Code
<p:lineChart id="chartOne" rendered="cond1"/>
<p:dialog widgetVar="dialogOne">
<p:lineChart id="chartTwo" rendered="cond1"/>
</p:dialog>
<script>
$('#chartOne').bind('jqplotClick',
function (ev, seriesIndex, pointIndex, data) {
dialogOne.show();
}
);
</script>
Now I am able to display dialogue on chart click but chart inside dialogue is not refreshing. I don't know much about refreshing content through JavaScript function.
Update1:
Condition is: chartOne should provide click over its whole canvas(not only datapoints or series). chartTwo should be rendered only if dialogOne.show() happens.
Any help...Much appreciated

It might be a solution to use a dynamic dialog.
From the documentation:
Dynamic mode allows dialog to fetch it's contents beforeit's shown rather than on page load which is useful to reduce initial page load times. Default is false.
Just define your dialog like this:
<p:dialog widgetVar="dialogOne" dynamic="true">
Update:
To refresh the dialog from Javascript you can use p:remoteCommand. Example:
<h:form id="formId">
<p:dialog id="dialog" />
</h:form>
<p:remoteCommand name="updateDialog" update=":formId:dialog"/>
Second update:
To use the p:remoteCommand call updateDialog() from Javascript.

Try this:
<p:lineChart id="chartOne" rendered="cond1" >
<p:ajax event="itemSelect" listener="#{bean.action}" update="chartTwo" oncomplete="dialogOne.show()" />
</p:lineChart>
<p:dialog widgetVar="dialogOne">
<p:lineChart id="chartTwo" rendered="cond1"/>
</p:dialog>
on the method action() of your backing bean, you should ready the data for chartTwo.
The clickable part of the chart, as per the user manual, would be the series, not the entire chart. check
http://www.primefaces.org/showcase-labs/ui/interactiveCharts.jsf
for more information and a working example.

Related

Primefaces p:log close option

Primefaces log has display but how can it will close option include.
I try below code:
<p:log id="log" />
In this code log panel is display but close option is never show because i just view log and close it. If there is any way to close log panel
Use .hide() method of PrimeFaces logger:
<p:commandButton type="button" value="close" onclick="PrimeFaces.logger.hide()" />

Dynamically add Primefaces Hotkey control

I am building an app where one of the requirements is heavy use of hotkeys. So heavy in fact that we want to pull those hotkeys back into a central controller.
The basic idea is each page will have a key associated with it. When jsf hits that key, it will go back to a central enummap to decide what hotkeys are supposed to be associated with that page and what methods are supposed to be added to the keys of that page.
My problem is the dynamic load. I can't use the
For now, I have this
<h:form binding="#{hotkeyController.form}">
<f:event listener="#{hotkeyController.genKeyHandler('HOTKETEST')}" type="preRenderComponent"/>
<p:outputPanel id="displayHotkey">
<h:outputText value="#{hotkeyController.keyText}" rendered="#{not empty hotkeyController.keyText}"/>
</p:outputPanel>
</h:form>
Then for my backing bean i have this
public void genKeyHandler(String pageKey) {
Hotkey hotkey = new Hotkey();
hotkey.setBind("ctl+shift+d");
hotkey.setAsync(true);
// "#{hotkeyController.keyHandler('HOTKETEST', 'F1')}"
hotkey.setActionExpression(createMethodExpression("#{hotkeyController.keyHandler('HOTKEYEXAMPLE', 'CTLSHIFTD')}", null,
String.class, String.class));
hotkey.setUpdate("displayHotkey");
form.getChildren().add(hotkey);
hotkey = new Hotkey();
hotkey.setBind("ctl+shift+a");
hotkey.setAsync(true);
// "#{hotkeyController.keyHandler('HOTKETEST', 'F1')}"
hotkey.setActionExpression(createMethodExpression("#{hotkeyController.keyHandler('HOTKEYEXAMPLE', 'CTLSHIFTA')}", null,
String.class, String.class));
hotkey.setUpdate("displayHotkey");
form.getChildren().add(hotkey);
}
Now this works in the sense that it actually inserts the hotkey into the form. I can see it in inspector. But, my problem is two fold. One, if I refresh the page, I get duplicate ID errors, if I use the preRenderView, I get "Error restoring component" errors. seems like no combination will work.
Is there any way to make this work? All I want is to have the bean method that inserts the hotkeys fire the first time a page is loaded and only fired once in the life of the page/view/whatever. This shouldn't be this hard.
My suggestion is that you use an exclusive form for the hotkeys.
Here is the sample:
<h:form id="mainForm">
<p:remoteCommand name="loadHotKeys" action="#{hotkeyController.genKeyHandler('HOTKETEST')}" update=":hotkeyForm" global="false" process="#this" />
<p:outputPanel id="displayHotkey">
<h:outputText value="#{hotkeyController.keyText}" rendered="#{not empty hotkeyController.keyText}"/>
</p:outputPanel>
</h:form>
<h:form id="hotkeyForm" binding="#{hotkeyController.form}" />
<script type="text/javascript">
jQuery(document).ready(loadForm());
</script>
And the genKeyHandler method should clear the hotkeyForm (form.getChildren().clear()) before adding the hotkeys.

show confirmDialog before rowEditor updates the model

I'm using PrimeFaces dataTable and rowEditor in pretty default way:
<p:dataTable id="payments-table" var="apayment" value="#{payment.payments}" editable="true">
<p:ajax event="rowEdit" listener="#{payment.update}"/>
...
</p:dataTable>
I'd like a confirmation dialog to show itself on clicking to the 'check' button of rowEditor.
I know it's possible using JS confirm function (thanks to Show a confirm message before <p:rowEditor> updates the model on click of "OK" button):
<p:ajax event="rowEdit" listener="#{payment.update}" onstart="return confirm('Save changes?')"/>
But I would like the dialog to conform to the UI theme, confirmDialog component being the best candidate. Alas, I don't know how to use it here. I tried the following and it won't work (simply no confirmation occurres):
<p:ajax event="rowEdit" listener="#{payment.update}">
<p:confirm header="Remove payment" message="Remove payment?" icon="ui-icon-trash"/>
</p:ajax>
....
<p:confirmDialog global="true">
<h:form id="form-payment-confirm">
<p:commandButton value="Yes" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check"/>
<p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close"/>
</h:form>
</p:confirmDialog>
Any ideas?
I think you can use in this case simple widgetVar and call show() or hide() functions. Here is your modified code:
<p:ajax event="rowEdit" listener="#{tableBean.onRowEdit}" oncomplete="myDialog.show()"/>
I use PF 3.5 and can't find global parameter in p:confirmDialog. May be it is new feature. So I simple deleted it of my code. Here is modified confirmDialog:
<p:confirmDialog widgetVar="myDialog" closeOnEscape="true" appendToBody="true" closable="true">
<h:form id="form-payment-confirm">
<p:commandButton value="Yes" type="button" update="#form" styleClass="ui-confirmdialog-yes" icon="ui-icon-check"/>
<p:commandButton value="No" type="button" onclick="myDialog.hide()" styleClass="ui-confirmdialog-no" icon="ui-icon-close"/>
</h:form>
</p:confirmDialog>
Please try and adjust this confirm dialog code! May be unnecessary code for update form or hide()...
EDIT:
If you want to dynamically adjust text message of confirmDialog, you can adjust from server-side. Perhaps it is not best solution. I think the second way is it adjust from client-side by JQuery.
Server-side:
The ajax event is same. It call onRowEdit listener which adjust simple String attribute. For example the bean containt:
String myDialogMessage = "Default message";
//getter and setter
public void onRowEdit(RowEditEvent event) {
myDialogMessage="Are you sure?";
}
and the dialog containt message property:
<p:confirmDialog widgetVar="myDialog" closeOnEscape="true" appendToBody="true" closable="true" message="{tableBean.myDialogMessage}">
Client-side:
You can use repleaceWith function of JQuery:
<script>
jQuery("myDialog.p").replaceWith(....
</script>
Of course need to develop more business logic to client-side, more functions. Maybe the server-side solution is faster.
Please try it!
Based on your comment, I edited:
I find this in 4.0 user' guide:
When pencil icon is clicked, row is displayed in editable mode meaning
input facets are displayed and output facets are hidden. Clicking
tick icon only saves that particular row and cancel icon reverts the
changes, both options are implemented with ajax interaction. Another
option for incell editing is cell editing, in this mode a cell
switches to edit mode when it is clicked, losing focus triggers an
ajax event to save the change value.
So ajax event works when row is change. Here is dataTable events which can you catch:
I hope this answer help to you find solution!

How to hide and show p:panel on commandbutton click

i have the following problem:
I'm new to JSF2 and primefaces.
I have a table in a page that will be populated with information, after the user enters a string and clicks a CommandButton. After clicking the button, I want it to be disabled until processing is over.
To disable the CommandButton I'm doing the following;
<p:commandButton update=":outPanel" widgetVar="btnSend" id="btnsend"
value="Calcular" actionListener="#{calcBean.getTrfs}"
onclick="btnSend.disable()" oncomplete="btnSend.enable()" />
And then I have a panel where I want to show its contents:
<p:panel id="outPanel" widgetVar="outpanel">
#{calcBean.result}
</p:panel>
How can I hide this outpanel when the page loads the first time?
How can I hide it when I click the CommandButton, and only show it again if the processing in my bean is successful?
Thanks.
Solved,
i have to put
closable="true" toggleable="true"
attributes in p:panel... Thanks
I have checked following panel hide and show using p:commandButton in JSF,
please try following methods in JSF,
<p:panel id="button_panel" widgetVar="testPanel" closable="true" toggleable="true">
<h1>Testing</h1>
</p:panel>
<p:commandButton onclick="PF('testPanel').show()" value="Show Panel" type="button"/>
<p:commandButton onclick="PF('testPanel').hide();" value="Hide Panel" type="button"/>
to show the panel after the ajax request is finished try this:
<p:commandButton update=":outPanel" widgetVar="btnSend" id="btnsend"
value="Calcular" actionListener="#{calcBean.getTrfs}"
onclick="btnSend.disable()" oncomplete="btnSend.enable();outPanel.show();" />

JSF 2. How do I force close a popup window before continuing navigation?

I have this piece of code for render a popup, using f:ajax:
<h:commandButton id ="botonAcceso"
value="#{msg['login.enter']}"
styleClass="botonPeque"
action="#{usuarioAuditoriaLogBean.entraAplicacion}">
<f:ajax disabled="true"
render=":login:errorAcceso"/>
</h:commandButton>
<h:panelGroup rendered="#{usuarioAuditoriaLogBean.popup}" id="errorAcceso">
<ui:fragment>
<script>window.open('#{usuarioAuditoriaLogBean.url}');</script>
</ui:fragment>
</h:panelGroup>
I want the person, who is trying to log, must first close the popup if the logging process fails, to try to log again. How can I do that?
Many thanks.
INMO you should not use widnow.open in this scenario... cause you have no control over it after its being opened , instead
1) You can use a third party JSF Components Library like Primefaces , they got Modal Dialog
2)You can use jQuery Modal Dialog , here an example

Resources