Mootools confirm dialog that will stop ajax function if cancelled.

Question

I have a JavaScript popup "confirm dialogue" setup on some links, when the link is clicked it says "are you sure?" and lets u confirm or cancel, however the ajax call will work regardless of what you choose.

<a onclick="return confirm(\'Are you sure?\')" class="sendEmailLink" href="/" id="someID">Send</a>

The function called starts as follows:

$$('.sendEmailLink').addEvent('click', function(e)
{
    e.stop();

    (I assume something should go here)

    var myRequest = new Request.JSON({
    etc... 

It makes sense the confirm dialogue would not stop the above code, but I cant get my head around how I can accomplish this in mootools. Help?

I need a dialogue box offering a choice of yes or no, if yes then continue with ajax request, if not then do not continue with request.

Thanks.

Answer 1

Like @Marcin mentioned, you are binding two click events to one element, so it is no wonder that your ajax call proceeds as usual irrespective of the result of the confirm dialog.

Eliminate one, by not binding event to an element via an onclick attribute. (Never use onclick!)

element.addEvent('click', function() {
    if (confirm('Are you sure?')) {
        new Request.JSON({
            // ...
        }).send();
    } else {
        // Do nothing
    }
});

Here is a relevant jsFiddle for you to play around with.