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

3
votes

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

2
jqueryjsfrichfacesspring-webflow
Is an error being thrown. Check your console. - Beetroot-Beetroot
Why is event.preventDefault() only necessary for 'open' and not 'close'? - Beetroot-Beetroot
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
What is the native action event.preventDefault() is trying to prevent. - Beetroot-Beetroot
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

2 Answers

1
votes

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

0
votes

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.