How to use a4j:commandLink with action attribute AND oncomplete attribute to fire some JavaScript?

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!

I think our CSS designers prefer commandLink over commandButton but I am not exactly sure why. COuld that be part of the problem here? Thank you. — JoJo, Oct 26 '12 at 21:55
Why do you change the id of the form before changing innerHTML. Did you try without changing it? — prageeth, Oct 28 '12 at 07:51
just guessing , Try using `ajaxsingle="true"` or to remove the `#{messages.submit}` ? do you see any errors in the firebug ? — Daniel, Oct 30 '12 at 12:31
It'd be helpful if you mention the exact JSF and RichFaces versions used. — BalusC, Oct 30 '12 at 15:25
@BalusC Thank you Balus, I added what I think are close to the versions. — JoJo, Oct 31 '12 at 14:34
Exact RichFaces version should be visible in filename of its JAR, or in `/META-INF/MANIFEST.MF` file of extracted JAR file (you can open/extract JAR files with a ZIP tool). — BalusC, Oct 31 '12 at 14:37
Wait.. I think I see it. As quick test, try this `onkeypress="if (event.keyCode == 13) { event.preventDefault(); document.getElementById('stockwatchSubmit').click(); }"` This prevents the default behavior of the keypress, namely submitting the parent form. — BalusC, Oct 31 '12 at 14:40
Okay. Have you tried replacing the `onkeypress` as per my last comment? — BalusC, Nov 01 '12 at 19:26
Yes, but because of IE8 it needs to be something like this: onkeypress="if(event.keyCode == 13){document.getElementById('stockwatchSubmit').click(); if(event.preventDefault){event.preventDefault();}else{event.returnValue = false;}}" — JoJo, Nov 01 '12 at 19:47
That's not relevant for now, we should concentrate on the problem in Firefox first. Did it solve the problem in Firefox? (by the way, when there are multiple commenters on a post, please use `@nickname` to notify the other about a comment-reply, otherwise nobody would be notified) — BalusC, Nov 01 '12 at 22:55
@BalusC Thanks for the tip BalusC right now the latest code I have shown above; works and submits records etc in FF 16 and Chrome (recent version).. IE8 fails both ENTER KEY submit, and the Submit button click. — JoJo, Nov 02 '12 at 13:20

score 4 · Accepted Answer · answered Nov 02 '12 at 13:54

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

score 2 · Answer 2 · answered Oct 30 '12 at 17:01

2

A few thoughts:

Try explicitly setting the reRender property of your commandLink to prevent the relevant area from being re-rendered.
Try removing the return false from oncomplete of your commandLink.
What is your action doing? Are you sure that the customerSession.stockWatch action isn't somehow causing a page reload?

answered Oct 30 '12 at 17:01

Michael Frederick

16,664
3
43
58

Well we do have a facesMessages.addToControl("email", "my message here"); firing at the very end of the method. And the email input box is NO LONGER there because I replaced the div id and changed the innerHTML. This facesMessages.addToControl has to remain for all of the other stores though... – JoJo Oct 31 '12 at 14:33

How to use a4j:commandLink with action attribute AND oncomplete attribute to fire some JavaScript?

2 Answers2