Develop Reference

Primefaces doesn't recognize the value of the cell/field if I don't leave the cell/field.

I'm having this issue with saving data from the grid in PrimeFaces. When I set the value in the cell, and then change another and another cell, click here and there, and then I click on the save button, everything is working perfect. But if I miss to exit the cell (to change the focus), and just click the save button, the value from that last cell is lost.
Here is my cell:
<p:cellEditor>
<f:facet name="output"><h:outputText style="text-transform: uppercase" value="#{bBean.someData}" /></f:facet>
<f:facet name="input">
<p:inputText style="text-transform: uppercase" value="#{bBean.someData}" label="Some data">
</p:inputText>
</f:facet>
</p:cellEditor>
It looks like PrimeFaces is not able to recognize the change if some event is not fired.
Any ideas?

Giving your <p:inputText> onmouseout event you can additionally save value when user leaves cell with mouse pointer:
<p:ajax event="mouseout" process="#this" partialSubmit="true"/>

Ok, now I fixed it for sure :)
I created a hidden button:
<p:commandButton process="#this" style="display:none !important" id="btn" value="SB"/>
and a javascript function that will simulate clicks on the hidden button:
function takefocus(){
$(PrimeFaces.escapeClientId('form:btn')).click();
}
and I added to the save button, before calling save:
<p:commandButton value="Save" onclick="takefocus();PF('waitDialog').show();saveData();"/>
and it is working fine.

The following works for Firefox, but not for Chrome.
So if you find a better solution please share it here.
<p:inputText onblur="triggerChange(this)... />
function triggerChange(el) {
var e = jQuery.Event('keydown');
e.which = 13;
e.keyCode = 13;
$(el).trigger(e);
}

onpage load call commandbutton in JSF

I'm trying to set value to hidden variable on page load and call to send that value to managedbean.Onpage load i'm able to set value and call commandbutton and get value in managed bean but its going to unconditional loop and executing more than once. Here's my code.
<script>
window.onload = setId ;
function setId(){
var facId = document.getElementById('formname:bId').value;
document.getElementById('formname:nameId').value = facId;
document.getElementById('formname:buttonId').click();
}
</script>
<h:inputText id="nameId" value="#{bean.nameId}"></h:inputText>
<h:commandButton id="buttonId" value="fId" action="#{bean.init()}" />
On page load its calling the button contineously.

h:commandButton submits the form and causes whole page reload due to which your script is executed again and this repeats. To avoid this one add
<h:commandButton id="buttonId" value="fId" >
<f:ajax event="click" listener="#{bean.init()}" />
</h:commandButton>
Hope this helps

Datatables row id in JavaScript

I would like to get the id of datatables row to call click() on a hidden button in the same table cell.
It is done that way because all buttons have to look like h:commandButton and i couldn't force p:commandButton look like them. And h:commandbutton doesn't have oncomplete event. I know I could use DataModel, but is there another way to do it (using JS, JQuery)?
When i put hardoced id (p:table:4:hiddenButton) everything is ok, but how to get that row number for each cell??
<h:form id="p">
<h:dataTable value="#{bean.paymentList}" var="pmt" id="table" >
...
<h:column>
<f:facet name="header">
<h:outputText value="#{bundle.action}" />
</f:facet>
<h:commandButton type="button" value="#{bundle.approve}"
onclick="document.getElementById('p:table:??:hiddenButton').click();" />
<p:commandButton id="hiddenButton" value="hidden" style="display: none;"
oncomplete="if (#{pmt.errorsNum} > 0) {
return confErrDial.show();
} else {
return confDial.show();};">
<f:setPropertyActionListener value="#{pmt.id}" target="#{bean.holder}" />
</p:commandButton>
</h:column>
</h:dataTable>
</h:form>
EDIT:
Ok i did some trick using JQuery, it may be not nice but works.
What I did:
I added id to h:commandButton and on onclick event i get id of h:commandButton and replace its id with id of hidden p:commandbutton, so its code is now:
<h:commandButton id="button" type="button" value="#{bundle.approve}"
onclick="document.getElementById(($(this).attr('id')).replace('button','hiddenButton')).click();"
Still maybe someone knows better solution.
PS: It is strange because $(this).parent().attr('id') is null. I think it has something with that no element is created with id p:table:0 p:table:1 etc...

f:ajax onerror called before listener

I have a simple form and a pretty simple bean that listens to an ajax event. Here is some of the code:
<script type="text/javascript">
function myfunction() {
alert('error');
}
</script>
<h:commandButton id="someid" value="somevalue" >
<f:ajax event="click" execute="someids" listener="#{MyBean.fireEvent}" onerror="myfunction()" />
</h:commandButton>
I am using eclipse in debug to see when MyBean.fireEvent is getting called and as far as I can tell it is getting called after onerror="myfunction()" is executed. What could be the reason for that?
I am using mojarra 2.0 with Resin.
Thanks.

looks like a formatting problem, maybe try:
<script type="text/javascript">
function myfunction(error) {
alert(error.description);
}
</script>
<h:commandButton id="someid" value="somevalue" >
<f:ajax event="click"
execute="someids"
listener="#{MyBean.fireEvent}"
onerror="myfunction" />
</h:commandButton>

The onerror attribute must point to the function name itself, not to the return value of the function.
So, if you replace
onerror="myfunction()"
by
onerror="myfunction"
then it should work as expected.

how execute a ajax after some js function in jsf2.0

i often use but i have this problem.
if there is a whose action is delete some entity ,but i want notify user who click this commandLink a javascript function confirm(str); if the confirm() answer is false, it doesnot trigger a ajax function. So i begin to use jsf.ajax.request function;my code like this .
<h:commandLink value="ajax" onclick="return ask(this,event,null,'page');" actionListener="#{test.ajax}"/>
<h:inputText value="#{test.page}" id="page"/>
this is my javascript code
function ask(element,event,exec,target){
if(confirm("are you ready to delete it"))
{
try{
jsf.ajax.request(element,event,{execute:exec,render:target});
}catch(ex){
alert(ex);
return false;
}
}else
return false;
}
，but it can execute it successfully,but i found it not a ajax.other value for backing bean is updated too!
if sb can tell me ! Be grateful!

You don't need to take over <f:ajax>'s job. Just return in the onclick.
<h:commandLink value="ajax" action="#{test.ajax}" onclick="return confirm('Are you sure?')">
<f:ajax execute="#this" render="page" />
</h:commandLink>
<h:inputText value="#{test.page}" id="page"/>
And use action instead of actionListener. You can return null or void there.

I have solved my problem. It was because I did not understand jsf.ajax.request well. If I want the actionListener to invoke in the backing, I also take the actionListener whose owner--dom object is to be executed.