Develop Reference

My event ajax keydown is too slow

I have a problem with a h:inputText and i don't know how to solve it.
I'm working on a xhtml page using JSF and RichFaces which contains fields as Calendar, SelectOneMenu, InputTextArea, Input. At the end of my form, there are two buttons Print and Save.
If one of the fields is modified (text, date, etc), i have to disable the Print button. In every field, i have add ajax event.
For example :
<rich:calendar datePattern="dd/MM/yyyy" timeZone="#{timeZone.timeZone}" value="#{myBean.date}">
<f:ajax event="change" listener="#{myBean.verifyModification}" render="myForm"/>
</rich:calendar>
If my date is changed, i call a method stored in my bean and it's ok.
But, i have a problem with my inputText and inputTextArea.
<h:inputText value="#{myBean.name}" maxlength="50">
<a4j:ajax event="keydown" render="myForm" listener="#{myBean.verifyName}" />
</h:inputText>
If i write fastly, for example i stay on the letter a to write aaaaaaaa in my field. The field will contain aaaaaaaa then aaaa. Is it because the ajax event is too slow? The problem doesn't come from my bean method because i only test a value.
Because of that, i can't test this field. I have tried the others events like blur, change. If i use these events, i have to click out of my field then my button is refresh.
Could you help me, please?
Thank you.

The problem is most likely that you render your complete form, not only the part of it that needs updating. JSF will then replace your form with the values you submitted on the first ajax request. Try:
<h:inputText value="#{bean.name}">
<f:ajax event="keydown" render="myButtonP" listener="#{bean.verifyName}" />
</h:inputText>
<h:panelGroup id="myButtonP">
<h:commandButton id="printBtn" value="Print" action="#{bean.printMe}"
disabled="#{bean.canPrint}" />
<h:commandButton id="saveBtn" value="Save" action="#{bean.save}" />
</h:panelGroup>
If you use disabled instead of rendered on the button, you can even reference printBtn directly in the render attribute.

How do I conditionally display a Javascript alert() that blocks the page from submitting until the user clicks "OK"?

I have a commandButton like this:
<p:commandButton value="Save" actionListener="#{bean.checkDetails}" action="#{bean.save}" />
My checkDetails() method checks some fields on the page and if they are not filled in, uses RequestContext to trigger a Javascript alert() which I want to use to block bean.save from being called until the user clicks "OK". The RequestContext piece looks like this:
RequestContext context = RequestContext.getCurrentInstance();
context.execute("alert('Details are not Complete.')");
My problem is I am not seeing the alert() dialog and bean.save is being called regardless of the state of the checkDetails() method.
Am I going about this completely the wrong way? I have spent three hours on this so far and I am plain stuck. If I remove the action method, the alert() pops up just fine.
Please, any input would be greatly appreciated.

My checkDetails() method checks some fields on the page and if they are not filled in...
As BalusC said, this can very easily be solved by adding required="true" to those fields, no need to write Java for this.
If you want to mix this up with the 'old-scool' alert() you can use the validationFailed callback parameter:
<h:form>
<p:inputText required="true" />
<p:commandButton value="submit" oncomplete="handleValidation(xhr, status, args)" />
</h:form>
<script type="text/javascript">
function handleValidation(xhr, status, args)
{
if(args.validationFailed)
{
alert('Details are not Complete.');
}
}
</script>

How to generate click event of panelgrid through jquery or javascript?

I am using JSF 2.0 and primefaces 3.0. I have a rowtoggler and rowexpansion. Since I am using primefaces old version so I dont have rowToggle event. And I need to call a method on server side through ajax at the time of row expansion. So I have put div tag around rowtoggler and calling a javascript function. Now I want to initiate ajax call through click event of panelgrid which is inside rowexpansion. If this happen then it would look like 3.4 rowToggle event.

You can use jQuery's event binding to execute Javascript when clicking on the row toggler.
<h:form id="form">
<p:dataTable id="dt" value="[1,2]">
<p:column>
<p:rowToggler />
</p:column>
</p:dataTable>
<p:remoteCommand name="remotecommand"
oncomplete="alert('remote command fired')" />
</h:form>
<script type="text/javascript">
$("[id='form:dt'] .ui-row-toggler").on("click", function() { remotecommand(); });
</script>
Explanation of Javascript:
The $("[id='form:dt'] .ui-row-toggler") selects the datatable by id (form:dt) and then selects all descendants that have the style class ui-row-toggler.
The .on("click", function() { remotecommand(); }) binds an anonymous function to a click event which fires a Javascript function declared by p:remoteCommand.
You can use the p:remoteCommand to execute bean methods with it's action or actionListener. ;-)
Note that this I don't find this to be a long term solution. Upgrading to PrimeFaces 3.4 would be a better solution.

I have put commandLink arround rowtoggler and I make ajax call through commandlink and I can also pass value through it using EL2.2
<p:commandLink action="#{myBean.doSomething(foo)}" >
<p:rowToggler/>
</p:commandLink>

I guess you'd something like
<p:panelGrid>
<p:ajax event="click" listener="#{bean.onclick}" />
...
the rest of the grid here
...
<p:panelGrid>
I haven't tested it but it works for other components

Except solution of siebz0r I found one more solution.
<p:commandLink action="#{bean.abcFunction}"> <p:rowToggler/> </p:commandLink>
it also works and simple too :-)

JSF / RichFaces commandButton called by JavaScript does not redirect

I have a javascript function to run h: or a4j: commanButton. When javascript function is called, action button runs action but after that page is not redirected.
I am using Seam 2.2 and RichFaces 3.3.3
What is the problem here? Thanks.
function submitForm(){
document.getElementById('myForm:save').click();
// does not redirect.
//document.getElementById('myForm').submit();
}
Even if I use submit() page is not redirected.
Form:
<h:form id="myForm">
//some fields
<h:commandButton id="save" value="Save"
action="#{personHome.persist}" />
</h:form>

To the point, the following should work for <h:commandButton>:
document.getElementById('myForm:save').click();
and when the button is the first button of the form in question:
document.getElementById('myForm').submit();
You only need to ensure that the generated client ID is exactly the same as the ID which you're specifying in getElementById(). If the <h:form> is by itself nested in another UINamingContainer component, then the ID will be prepended with its ID. Rightclick page in browser and View Source to be sure.
As to the concrete problem, perhaps you've attached this function to another button which in turn also submits some form by itself which will result in a race condition of two requests. You should then return false; from or after the function to block the caller's default action. E.g.
<h:commandButton onclick="return submitForm();" />
with
function submitForm(){
// ...
return false;
}

Javascript calling JSF handler method

I am reading an xml file using javascript and then I need to submit my form so that it calls a particular method in my JSF handler. Usually this can be done on a jsp when user clicks a button by having an actionlistener like so:
<h:commandLink styleClass="button" action="#{myHandler.outcome}" actionListener="#{myHandler.doNext}">
<span><h:outputText value="#{text.button_submit}" /></span> </h:commandLink>
I am not sure how to call a method like 'doNext' above in the handler from javascript. I cannot do a simple:
document.form.submit();
as it then repeats the processing i have already done. I want to read values from an xml file and then call a particular method in handler. Any ideas much appreciated.

I found a solution to this. I added a hidden button to my jsp like:
<p id="hiddenButton" style="display:none;" >
<h:commandLink id="hiddenRegButton" styleClass="button" action="#{myHandler.doNext}" />
</p>
and in my javascript I used jQuery to execute the click which leads t the "doNext" method in my Handler to get executed.
jQuery('#hiddenRegButton').click();
this was easier than I thought.