JSF h:commandLink and onclick events

If you've ever tried to add an onclick handler to a JSF h:commandLink component, you'll notice that the event isn't defined. The reason is that JSF uses onclick for it's own purposes, to POST the click where it would normally be a GET request. For example,

<a id="entriesTableView:feedForm:feedTable:0:deleteEntryLink" 
href="#"
onclick="clearFormHiddenParams_entriesTableView_feedForm('entriesTableView:feedForm');document.forms[ ... and so on ...

This makes it impossible to do one of the most basic onclick tasks: confirm an action. If you Google for this, the suggestion is to set the onmousedown handler, and use it just as you would onclick:

<h:commandLink action="delete" onmousedown="return confirmDelete(this);">

Nice idea, but it turns out that many browser do not treat the "return false" from the onmousedown event the same way as with onclick. Normally, the false return value means abort the user's click. However, it appears that it does NOT necessarily mean abort the onclick event handler. The result is that the onclick is executed regardless of the return value of the onmousedown event handler.

The solve this, you'll need to do some Javascript trickery. The basic idea is to re-assign the link's onclick handler to a new Javascript function that has a pointer to the original (JSF defined) function. The new function does the ok / cancel logic. An "ok" just calls the original JSF-defined onclick function. "Cancel" returns false from onlick, and aborts the click like we want.

... 
var deleteClick;
          
function assignDeleteClick(link) {
  if (link.onclick == confirmDelete) {
    return;
  }
               
  deleteClick = link.onclick;
  deleteMsg = msg;
  link.onclick = confirmDelete;
}
           
           
function confirmDelete() {
  var ans = confirm("Delete?");
  if (ans == true) {
    return deleteClick();
  } else {
    return false;
  }
} 
...
<h:commandLink action="delete" onmousedown="assignDelete(this);">

 Note that this re-assigns the onclick event every time the link is clicked. This is not necessary and it could be done once in the onload event. This would require hardcoding of the big long scary JSF component ID, which I do not like doing. This is the reason that the first lines of assignDelete() check to ensure that the assignment hasn't been done already.

 


Comments:

Hi there. Just a quick note to let you know that this workaround isn't necessary if using JSF 1.2. The 1.2 spec requires that the commandLink wrap any user specific content specified in the onclick attribute and invoke it as well as the standard JS the commandLink uses to submit the form.

Posted by Ryan Lubke on March 19, 2007 at 06:03 AM PDT #

On more comment for JSF 1.2 + commandLink: onclick does not work w/ onclick="someFunction(this)". Because of the encoding strategy, that function is wrapped into another function and 'this' is not the anchor anymore, but some windowObject component.

As a workaround I'm using onmouseup.. it works if all you need is that function to be executed..

Posted by doballve on October 01, 2007 at 03:23 PM PDT #

5

Posted by guest on June 04, 2008 at 05:12 PM PDT #

This works.

function confirmationDelete(link) {
if (confirmDelete()) {
link.fireEvent('onclick');
return true;
}
return false;
}

function confirmDelete() {
var ans = confirm("Are you sure you want to delete this record?");
if (ans == true) {
return true;
} else {
return false;
}
}

Posted by SG on October 02, 2008 at 09:48 AM PDT #

Hi all,

The only thing that works here, is the SG solution posted on 2nd October 2008. The main example doesn't work, and should not work.

check this line: deleteMsg = msg;

What's that for? It even doesn't compile! This is one other good reason I hope to stay away from JSF soon. No support, too many ways, patches to do simple things.

regards,

Posted by Etienne on October 29, 2008 at 07:31 PM PDT #

jsghdlk;jdlkd;lkd;'dl;'djhkj

Posted by guest on February 22, 2009 at 08:42 PM PST #

hhhhhhhhhhhhhhhhhhhhhhhssssssssssssssssssssssssssssssssssskkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkssssssssssssssssssssssssssssssssmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmhdghfhgdfdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmssssjjjjjjjjjdj,hslkj

Posted by guest on February 22, 2009 at 08:47 PM PST #

The select items have object values. http://www.watchgy.com/ All is good. When I submit the form, I see "Validation Error: Value is not valid". My first reaction was that I didn't have any validation on the page, so how could a value be not valid? http://www.watchgy.com/tag-heuer-c-24.html
http://www.watchgy.com/rolex-submariner-c-8.html

Posted by replica rolex on December 28, 2009 at 11:58 PM PST #

Thanks for the posts (original and Oct 2)... I condensed the Oct 2 functions into one:

function confirmationDelete(link) {
if (confirm("Are you sure you want to delete this record?")) {
link.fireEvent('onclick');
return true;
}
return false;
}

This page helped a lot! I was tossing and twisting my code just so I could add a confirm prompt to my link. Why did we even have to go through that?! I even tried changing the link to a button, but then there's the problem of passing parameters (!). I also briefly considered upgrading to JSF 1.2, but it's gonna take more time to do regression testing. Good thing I found this page. What life would be like without the internet!

Thanks again. :)

Posted by Laura on February 01, 2010 at 07:36 AM PST #

None of these seem to work with google chrome.

Posted by Jas on February 10, 2010 at 05:38 AM PST #

A problem is that link.fireEvent('onclick'); only works in Internet Explorer.

I solved the problem by using this definition

<h:commandLink actionListener="delete" onclick = "if (!confirm('Are you sure ?')) {return false};">

If the answer is NO, onclick is terminated otherwise the jsf onclick function [onSubmitForm ('...] is called.

Very simple and works for IE and Firefox...

Posted by Ansgar Schramma on December 02, 2010 at 05:37 PM PST #

Replace link.fireEvent('onclick'); by link.onClick and it works for IE and FF.

Posted by Keeg on January 25, 2011 at 07:00 PM PST #

Post a Comment:
  • HTML Syntax: NOT allowed
About

jtb

Search

Categories
Archives
« August 2015
SunMonTueWedThuFriSat
      
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
     
Today