Asynchronous $.rails.confirm

[sobrinho]

These function:

confirm: function(message) {
  return confirm(message);
}

Do not allow us to use a custom confirmation because return the confirmation immediately.

I would to use something like jQuery UI Dialog, take a look: http://jqueryui.com/demos/dialog/#modal-confirmation

This requires a major change on this function to something like that:

confirm: function(message, success) {
  $( "#dialog-confirm" ).dialog({
    resizable: false,
    height:140,
    modal: true,
    buttons: {
      "Yes": function() {
        $( this ).dialog( "close" );

        // execute the function that means "I confirm"
        success();
      },
      "No": function() {
        $( this ).dialog( "close" );
      }
    }
  });
}

This approach will allow us to customize the entire confirmation because window.confirm() is not equal between all browsers.

To keep the current confirmation working will be something like that:

confirm: function(message, success) {
  if (confirm(message)) {
    success();
  }
}

The success function should redirect to link or submit the form or what should be necessary.

Our users frequently calls support telling things like: "I clicked on Cancel Item link and appeared ok and cancel. I don't want to cancel the item anymore, what should I do? ok means what? cancel means what?"

Think about it:

Are you sure you want to cancel the item?

[ ok ] [ cancel ]

It is not clear enough than:

Are you sure you want to cancel the item?

[ yes ] [ no ]

If you want to be more user friendly:

Are you sure you want to cancel the item?

[ Yes, I want to cancel the item ] [ Do not cancel and list the items again ]

What you think?

I guess we can keep backwards compatibility simply checking the $.rails.confirm signature.

[JangoSteve]

This is a really difficult problem to solve, but a lot of people have shown interest. (See #196 and #260 for related discussion, and my current working async branch, which provides this feature.)

If enough people use that branch, I may consider merging it with master. It relies on some undocumented functionality in js/jquery, which is why I haven't pulled it in yet.

[sobrinho]

@JangoSteve I will take a look, thanks!

If it have tests and it's working, what's the reason to not merge? :)

[JangoSteve]

Because it relies on some low-level undocumented "features" of jquery and javascript, namely firing native javascript events for the express reason that they do not trigger jquery events to which people have likely bound handlers. It's strange, but it's the only way I could get this working, backwards compatible, and with no side effects. In short, it makes me nervous. I'd like to have a lot of people using it in production with no ill effects for a while before I consider merging it.

[sobrinho]

In the past I used this kind of approach without side-effects:

$el.get(0).submit();

I will try your branch and tell you if everything is fine here ;)

[sobrinho]

@JangoSteve could you enable issues in your fork?

I found one issue :P

[JangoSteve]

Done.

[sobrinho]

@JangoSteve do you have any news about that?

[jeremyhaile]

@JangoSteve There's a bug on line 433. It should be event.preventDefault() not e.preventDefault()

[jherdman]

What ever happened with this? Is the fork alive still?

[shlima]

+1

[travishaynes]

Here's my solution. It doesn't rely on "undocumented browser/javascript/jquery features," like the asynchronous-call-to-confirm branch does. All it does is store the answer in a data attribute and fire the event again when it's true.

$.rails.allowAction = function(element) {
  var message = element.data('confirm');

  if (!message) { return true; }

  if (element.data('confirmed')) {
    element.data('confirmed', false);

    return $.rails.fire(element, 'confirm:complete', [true]);
  }

  if ($.rails.fire(element, 'confirm')) {
    try {
      openYourAsyncConfirmDialogHere(message, function(answer){
        element.data('confirmed', answer);
        callback = $.rails.fire(element, 'confirm:complete', [answer]);
        if(answer && callback) { $.rails.fire(element, 'click'); }
      });
    } catch (e) {
      (console.error || console.log).call(console, e.stack || e);
    }
  }

  return false;
}