Question

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

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

In FireFox however It correctly sumbits to the database though the action and it’s bean method. Then oncomplete it fires a JS function and does show the thank you message, but then the page completes its reload I think and the original form reappears which we do not want!

First the RichFaces and Events in the front page codel

<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 the 2 simple javascript functions 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();
    }
}

Thanks for your help. Got it working in 2 out of 3 browsers! But not good enough!! 😉

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

Edit:
I wish there was more information I could provide. This may be in fact a case of ajax4jsf / a4j simply failing when there are multiple separate pieces of a4j logic on the web page… but the thing is, they are obviously all not being used at the same time. So something LIKE what I have done should work yes? Some changes to the code next:

<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>

I only use one JavaScript function now as well, and that is to change the id value of the wrapper div (because it will change the css) and then to update the innerHTML.

One more piece of information that may be helpful in solving this is that many many times as I rewrote and rewrote the JSF/RICHFACES to get it to work –> in all browsers by pressing ENTER Key AND Clicking a Submit button..

I would see the action attribute simply NOT firing the method in the bean. I have a sysout as soon as you enter the method so I can see it in my console. And this is not happening. Our system is pretty robust so I am not sure what to think. Except that a4j is broken? at least in the version we are running.. I mean this is pretty simple code and the action attribute is not making it to the method! =)

I mean to say, it does work sometimes, various itterations as I am trying to get it to work on ALL browsers the method does fire and a record is inserted into a DB.

But other revisions of the code the action attribute simply does not fire. That is what I am trying to say.

Thanks again all!

Answer 1

Your concrete problem is caused by a double submit on enter key.

In the input field you have an onkeypress handler which triggers the click event on the submit button when the enter key is pressed. But you aren’t preventing the event’s default behaviour (as would have been exposed when there’s no onkeypress handler). In Firefox, apparently, submitting the ajax form with a command link works via pressing enter.

You basically need to prevent the event’s default behaviour. The easiest crossbrowser way to achieve this is returning false from the onkeypress handler.

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

If you’d like to refactor 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;
    }
}