How to use a4j: commandLink with action attribute and oncomplete attribute to run JavaScript?

Question

I have code that I managed to get in Chrome, IE8, but not FireFox. BTW: my a4j: namespace is:

The idea is simple, you want to be notified when the product is out of stock, so you enter your email address and we replace the tiny form with a simple Thank you div.

In FireFox, however, it pops the database correctly, although the action is a bean method. Then oncomplete it starts the JS function and shows a thank you message, but then the page finishes reloading, I think, and the original form appears again that we don’t want!

RichFaces and events in the main page code first

<h:inputText id="email" value="#{customer.stockWatch.email}" converter="TextTrimConverter" onfocus="if(this.value == 'Enter email address'){ this.value=''; }" onblur="if(this.value.trim() == ''){ this.value='Enter email address'; }" onkeypress="stockWatchEnterSubmit(event.keyCode);" /> <a:commandLink styleClass="b_submit" id="stockwatchSubmit" action="#{customer.stockWatch}" oncomplete="stockWatchTextChange(); return false;"> <span>#{messages.submit}</span> </a:commandLink> 

And now, two simple javascript functions that I use:

 function stockWatchTextChange() { document.getElementById('fstockwatch').setAttribute('id', 'fstockwatch_thanks'); document.getElementById('fstockwatch_thanks').innerHTML = 'Thank you. We\'ll send you an email once this item is back in stock'; } function stockWatchEnterSubmit(keyCode) { if(keyCode == 13){ document.getElementById('stockwatchSubmit').click(); } } 

Thank you for your help. Got it working in 2 of 3 browsers! But not enough!;)

JSF - version 1.2 and RichFaces - I think 3.01? I found the exact version of RichFaces:
Version - richfaces-api-3.3.1.GA.jar

Edit: I would like to receive more detailed information. This may be in fact the case ajax4jsf / a4j simply does not work when there are several separate parts of the a4j logic on the web page ... but the fact is that they are obviously not all used at the same time. So, something I did should work, huh? Some changes in the following code:

 <h:form id="detailForm" prependId="false"> <h:inputText id="email" value="#{customer.stockWatch.email}" converter="TextTrimConverter" onfocus="if(this.value == 'Enter email address'){ this.value=''; }" onblur="if(this.value == ''){ this.value='Enter email address'; }" onkeypress="if(event.keyCode == 13){document.getElementById('stockwatchSubmit').click(); if(event.preventDefault){event.preventDefault();}else{event.returnValue = false;}}" /> <a:commandLink styleClass="b_submit" id="stockwatchSubmit" action="#{customer.stockWatch}" oncomplete="stockWatchTextChange();"> <span>#{messages.submit}</span> </a:commandLink> </h:form> 

Now I use only one JavaScript function, and this should change the id value of the div wrapper (because it will change css) and then update innerHTML.

Another piece of information that may be useful in resolving this issue is that many times when I rewrote and rewritten JSF / RICHFACES to make it work → in all browsers by pressing the ENTER key and pressing the "Submit" button. .

I would notice that the action attribute just DOES NOT run the method on the bean. I have sysout as soon as you enter a method so that I can see it on my console. And this does not happen. Our system is pretty reliable, so I'm not sure what to think. Except that a4j is broken? at least in the version we are launching. I mean, this is pretty simple code, and the action attribute does not reach the method! =)

I want to say that it sometimes works, various iterations, when I try to get it to work in all browsers that the method launches, and the record is inserted into the database.

But in other versions of the code, the action attribute simply does not work. This is what I am trying to say.

Thanks again!

Answer 1

Your specific problem is caused by double sending to the enter key.

In the input field, you have an onkeypress handler that fires the click event on the submit button when you press the enter key. But you do not prevent the default behavior for the event (as would be shown when there is no onkeypress handler). In Firefox, it seems that submitting the ajax form using the command line works by pressing the enter key.

Basically, you need to prevent the default behavior for the event. The easiest way to achieve a crossbrowser is to return false from the onkeypress handler.

 onkeypress="if (event.keyCode == 13) { document.getElementById('stockwatchSubmit').click(); return false; }" 

If you want to reorganize it into a function, let it return a boolean.

 onkeypress="return stockWatchEnterSubmit(event.keyCode)" 

with

 function stockWatchEnterSubmit(keyCode) { if (keyCode == 13) { document.getElementById('stockwatchSubmit').click(); return false; } else { return true; } } 

Answer 2

A few thoughts:

• Try explicitly setting the reRender property of your commandLink to prevent re-rendering of the corresponding area.
• Try to remove return false from oncomplete your commandLink .
• What are you doing? Are you sure that the action customerSession.stockWatch does not cause a page reload?