jQuery event.preventDefault() does not work on h:commandLink

Question

I want to show a jQuery dialog as conformation-popup, when the user clicks on a cancel link. ("Do you really want to cancel?")

jQuery(#{rich:element('cancel')}).click(function(event) {
    var dialog = jQuery(#{rich:element('cancelDialog')});
    if (dialog.is(':visible')) {
        jQuery(#{rich:element('cancelDialog')}).dialog('close');
    }
    else {
        jQuery(#{rich:element('cancelDialog')}).dialog('open');
        event.preventDefault();
    }
});

<h:commandLink action="cancel" immediate="true" id="cancel" value="cancel" />

The dialog is opening, but the event won't be canceled (--> the cancel event is proceeded). When i use a h:commandButton instead, it works, but the customer wants this as a link.

I use JSF 2.0 (MyFaces), jQuery 1.6.1, Spring Webflow 2.3.0.RELEASE and as JSF Framework Richfaces 4.0.0.FINAL. Does anyone knows a solution with these frameworks? I can't use other frameworks.

Thank you, Patrick

Why is `event.preventDefault()` only necessary for 'open' and not 'close'? — Beetroot-Beetroot, Jan 03 '13 at 11:32
No error is being thrown (according to Chrome Console). The event.preventDefault() is just necessary on 'open' because the user clicks on the cancel link and the dialog is shown. In this case the event should be canceled. But this does not matter. Basicly you can ignore this if - else stuff. It does not work if this event.preventDefault() stands there alone either. — Patrick Zinner, Jan 03 '13 at 11:46
What is the native action `event.preventDefault()` is trying to prevent. — Beetroot-Beetroot, Jan 03 '13 at 11:51
I'm not quite sure if I know what you mean (I'm pretty new in jQuery and JavaScript at all), but the click-event should be prevented. And as I said, when I use a commandButton instead, it works. According to the jQuery-Doc, calling this method cancels the default event (Quote: "If this method is called, the default action of the event will not be triggered."). So I asumed this would be the navigation. — Patrick Zinner, Jan 03 '13 at 11:57
You can't suppress the event - it's already happened. You can use the event's `preventDefault()` method to suppress the element's natural action. In the case of a `` element `preventDefault()` will suppress its hyperlink action. Is this what you are trying to do? — Beetroot-Beetroot, Jan 03 '13 at 12:19

Felipe Fonseca · Accepted Answer · 2013-01-03T13:19:22.213

1

Use return false in the function instead of event.preventDefault()

To learn more about the difference: The difference between ‘return false;’ and ‘e.preventDefault();’

EDITED

Since it still not work, I suggest use the onmousedown event instead of click, with the same function. JSF h:commandLink and onclick events

edited Jan 03 '13 at 13:19

answered Jan 03 '13 at 12:12

Felipe Fonseca

1,129
9
18

I tried that as well, but it didn't work either. I also tried a lot of stuff i found on the internet (e.g. event.stopPropagation()), but nothing worked. – Patrick Zinner Jan 03 '13 at 12:16
@Patrick, just for a test, try creating a JS function with this content and call at the "onclick" attribute of the commandLink instead of binding via jQuery. I don't think there's a difference but im running out of ideas :) – Felipe Fonseca Jan 03 '13 at 12:26
Well, my last idea is use the onmousedown event instead of click, with the same function. [JSF h:commandLink and onclick events](https://blogs.oracle.com/jtb/entry/jsf_h_commandlink_and_onclick) – Felipe Fonseca Jan 03 '13 at 12:58
Mh. Now i did just onclick="return false;" on the commandLink and it worked. But I don't see any difference. When I put an alert before the event.preventDefault() / return false; in my if-else, it appears. So the line should be executed. – Patrick Zinner Jan 03 '13 at 13:00
The only thing that makes sense is that the `.dialog()` plugin (or something else) attaches a click event handler of its own? – Beetroot-Beetroot Jan 03 '13 at 13:08
Yes! It works with the onmousedown event :) Thank you very much, wouldn't have thought about this in years. – Patrick Zinner Jan 03 '13 at 13:13

score 0 · Answer 2 · answered Jan 03 '13 at 12:39

0

I would do it like this :

jQuery(#{rich:element('cancel')}).bind('click', function(event) {
    event.preventDefault();
    var dialog = jQuery(#{rich:element('cancelDialog')});
    var action = (dialog.is(':visible')) ? 'close' : 'open';
    dialog.dialog(action);
});

Well actually I wouldn't because (a) I would be using jQuery 1.7+ and (b) I wouldn't be using JSF/Spring.

answered Jan 03 '13 at 12:39

Beetroot-Beetroot

18,022
3
37
44

Mmm, It's not straightforward then. – Beetroot-Beetroot Jan 03 '13 at 13:10

jQuery event.preventDefault() does not work on h:commandLink

2 Answers2