I want to use the dblclick event on the commandlink component of the PrimeFaces framework.
I have the following error:
javax.faces.view.fletters.TagException: /templateNote.xhtml # 22.60 Event: dblclick is not supported.
Thanks for your help.
Here is my code:
<p:commandLink>
<p:ajax event="dblclick"
listener="#{noteManagerBean.noteSelection(note)}"
oncomplete="PF('widgetNoteDialog').show()"
update="idNoteDialog"/>
<p:graphicImage value="images/PostIt#{note.couleur}.png" style="position: absolute; top: 0; left: 0"/>
you can try this:
<p:commandLink value="click me" ondblclick="noteSelection()" onclick="return false;"/>
<p:remoteCommand name="noteSelection" actionListener="#{testBean.doit}" />
primefaces will generate javascript method "noteSelection", you can call it anytime
Related
I need to prevent tab close in tabView primefaces and i know i can use
onTabClose="return false;"
The problem is I don't want to close tab but i want to make action when close is clicked. When i use onTabClose="return false;" then <p:ajax event="tabClose" listener="#{bean.onTabClose}" update=":growls:mainGrowls"/> is not called.
How can I prevent tab from closing on cross click and call function from bean?
Can i somehow prevent closing in this method?
public void onTabClose(TabCloseEvent event) {
FacesMessage msg = new FacesMessage("Tab Closed", "Closed tab: " + event.getTab().getId());
FacesContext.getCurrentInstance().addMessage(null, msg);
}
tabView:
<p:tabView id="tabView" activeIndex="0" style="height: 100%;" onTabClose="return false;">
<p:ajax event="tabClose" listener="#{bean.onTabClose}" update=":growls:mainGrowls"/>
<p:tab title="#{tabTitle}" closable="false" >
<div style="height: 100%; background: #efefef !important">
<ui:insert name="tab" />
</div>
</p:tab>
<p:tab title="" closable="true" id="">
</p:tab>
</p:tabView>
If you want to invoke a method in a managed bean, you could create a p:remoteCommand:
<p:remoteCommand name="yourRemoteCommand"
actionListener="#{yourBean.yourMethod}" />
This allows you to use yourRemoteCommand() in Javascript, so you could use:
onTabClose="yourRemoteCommand(); return false;"
If you need to send parameters to the remote command, see:
Pass parameter to p:remoteCommand from JavaScript
I have a problem, I'm using p:blockUi to block the full body of my page. The problem is that the AJAX events stopped to work, actually they only work once and then never again.
¿Does anybody now how I can fix it?
Here is my code:
<h:form id="formMenu">
<ul class="menu">
<li><p:commandLink action="alta" value="Alta" id="btn_alta"/></li>
<li><p:commandLink value="Tramitación" id="btn_tramitacion"/></li>
<li><p:commandLink value="Bajas" id="btn_baja"/></li>
<li><p:commandLink action="salir" value="Salir" id="btn_salir"/></li>
</ul>
<p:blockUI block=":full_page" trigger="btn_alta,btn_salir,btn_tramitacion,btn_baja">
<h:panelGrid columns="1">
<h:graphicImage value="/resources/img/ajaxloadingbar.gif"
style="horizontal-align:middle; vertical-align: middle;"/>
<h:outputText value="Cargando..." style="white-space: nowrap;"/>
</h:panelGrid>
</p:blockUI>
</h:form>
I have the following code:
<p:calendar id="initialDate"
styleClass="calendar"
value="#{dashboardMB.initialDate}"
converter="localDateConverter" />
<p:graphicImage style="position: relative;
left: 25px;
top: 4px;
width: 18px;
height: 18px;"
library="img"
name="ui-icon-calendar.png"
width="24"
height="24" />
How it would be possible for an onclick event on this p:graphicImage open the p:calendar component?
if you want to trigger it from an other element:
<p:calendar showOn="both" widgetVar="myWidget" styleClass="mycal">
</p:calendar>
<a onclick="PF('myWidget').jqEl.datetimepicker('show');return false;" href="#">open calendar</a>
I followed the intructions given by BalusC in [this answer][1]
[1]: JSF and f:ajax for hiding/showing div and it worked. But I want to hide the element when the command button is pressed and the element with the id="incorrectQuestion" is shown. I did it almost like in the example. I have tried a lot of combinations but I couldn't hide the command button.
<h:panelGroup rendered="#{not answerResultBean.showIncorrectQuestions}">
<div id="loginDiv" style="width: 400px; text-align: left;">
<center>
<f:ajax render="incorrectQuestions">
<br />
<h:commandButton value="#{strings.failedQuestions}"
action="#{answerResultBean.setShowIncorrectQuestions(true)}" />
<br />
<br />
</f:ajax>
</center>
</div>
</h:panelGroup>
<h:panelGroup id="incorrectQuestions">
<h:panelGroup rendered="#{answerResultBean.showIncorrectQuestions}">
<div id="loginDiv" style="width: 400px; text-align: left;">
...
Just put the <h:panelGroup> containing the button inside <h:panelGroup id="incorrectQuestions"> as well. This way it will also be updated on ajax request and the rendered condition would cause it to be hidden.
By the way, try to keep your code DRY. You've there quite some code duplication.
<h:panelGroup layout="block" id="loginDiv" style="width: 400px; text-align: left;">
<h:commandButton value="#{strings.failedQuestions}"
action="#{answerResultBean.setShowIncorrectQuestions(true)}"
style="text-align: center; margin: 10px;"
rendered="#{not answerResultBean.showIncorrectQuestions}">
<f:ajax render="loginDiv">
</h:commandButton>
<h:panelGroup rendered="#{answerResultBean.showIncorrectQuestions}">
...
</h:panelGroup>
</h:panelGroup>
Note that a <h:panelGroup layout="block"> generates a <div>. This way there's no need for a <h:panelGroup><div>.
Specifically I refer to this example:
<h:panelgroup>
<a4j:support event="onlick" action="do1"/>
<h:commandbutton id="1".../>
<h:commandbutton id="2".../>
<h:commandbutton id="3"...>
<a4j:support event="onlick" action="do2"/>
</h:commandbutton>
</h:panelgroup>
My questions -
If I click one of the buttons in the panelgroup, will do1() fire?
If I click the third button will do1() and do2() fire? (What'll happen?)
I'm asking instead of just trying in a sandbox because I hope to understand a little behind the scenes why the specific behavior occurs.
Thanks!
Ok. Tested it and this is the result:
For this Code:
<h:form>
<h:panelGrid>
<h:panelGrid style="border: 1px solid #000;">
<h:outputText value="Panel1" />
<a4j:support event="onclick" action="#{mrBean.doSupport1}" />
<h:commandButton action="#{mrBean.doButton}">
</h:commandButton>
<h:panelGrid style="border: 1px solid #000;">
<h:outputText value="Panel2" />
<a4j:support event="onclick" action="#{mrBean.doSupport2}" />
</h:panelGrid>
</h:panelGrid>
</h:panelGrid>
</h:form>
If I click in panel1 I get:
doSupport1 runs.
If I clock on the button I get:
doSupport1 runs.
doButton runs.
If I click in panel2 I get:
doSupport1 runs.
doSupport2 runs.
So the answer to my question is that all support objects catch events and the order they are called is from father to son.