Asynchronous $.rails.confirm

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.

[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;
}

[shlima]

+1