Custom rails confirm box (with $.rails.confirm override)

Question

I've been tinkering with this for a long long time.

I would like to hijack the default JS confirm dialog with something I rolled myself. I'd like to use a completely custom layout (the bootstrap(from twitter) dialog panel).

What I have doesn't work. It show up nicely and I can click the buttons and it'll dissapear. The documentation says that you should return true in case of Ok and false in case of a Cancel. This is very cute and all but it doesn't work. It looks like I need a callback or a reference to the object that originally called the function. Even the latter isn't possible since $.rails.confirm only passes in the message.

(The first answer from this question is pretty interesting. I need a way to make it modal so it waits for the return of the custom dialog.)

So could somebody please point me in the right direction? I feel like I'm going to slap something. Hard!! jQuery UI is only an option of I can make my dialog look exactly like the one I currently have.

Here is what I have:

This is placed in my application.erb

<div id="modal-confirm" class="modal">
  <div class="modal-header">
    <h3>Are you sure?</h3>
    <a href="#" class="close">×</a>
  </div>
  <div class="modal-body">
    <p>{{VALUE}}</p>
  </div>
  <div class="modal-footer">
    <a id="modal-accept" href="#" class="btn primary">OK</a>
    <a id="modal-cancel" href="#" class="btn secondary">Cancel</a>
  </div>
</div>

javascript.js:

function bootStrapConfirmDialog(message) {
  // get a handle on the modal div (that's already present in the layout).
  d = $("#modal-confirm");
  // replace the message in the dialog with the current message variable.
  $("#modal-confirm div.modal-body p").html(message);
  // offset the dialog so it's nice and centered. we like that ;)
  // d.offset({ top: 400, left: (document.width - d.width) / 2 });
  d.center();

  // show the dialog.
  d.toggle(true);
  console.log("popped open");
}

$(document).ready(function(){
  // jquery support
  $.fn.extend({
    center: function () {
      return this.each(function() {
        var top = ($(window).height() - $(this).outerHeight()) / 2;
        var left = ($(window).width() - $(this).outerWidth()) / 2;
        $(this).css({position:'absolute', margin:0, top: (top > 0 ? top : 0)+'px', left: (left > 0 ? left : 0)+'px'});
      });
    }
  });

  // modal stuff
  $("#modal-confirm").toggle(false);

  // wire up cancel and x button.
  $("#modal-confirm #modal-cancel, #modal-confirm a.close").click(function (e) {
    d.toggle(false);
    console.log("clicked cancel");
    return false;
  });

  // wire up OK button.
  $("#modal-confirm #modal-accept").click(function (e) {
    d.toggle(false);
    console.log("clicked accept");
    return true;
  });

  // wire up our own custom confirm dialog.
  $.rails.confirm = function(message) { console.log("start intercept"); return bootStrapConfirmDialog(message); };
});

and then finally in my view:

<%= link_to 'delete customer', customer_path(@customer), :class => 'btn danger', :method => :delete, :confirm => "Are you sure you would like to delete '#{@customer.name}'?" %>

---

@ 23:46 GMT

Ok, I figured out a way ... and it isn't pretty. I basically extended jquery-rjs in a way that the actual element is passed along to the $.rails.confirm method. That way I at least know what should happen if the OK button is pressed in the modal. So here is the new snazzy code.

My new application.js. Works like a charm. But I'm a little disturbed at how many things I had to override. I probably broke something and I don't even know about it (rails.formSubmitSelector and/or rails.formInputClickSelector). So if you have a better solution ... give :D thx!

function bootStrapConfirmModal(message, element) {
  // get a handle on the modal div (that's already present in the layout).
  d = $("#modal-confirm");
  // replace the message in the dialog with the current message variable.
  $("#modal-confirm div.modal-body p").html(message);
  // offset the dialog so it's nice and centered. we like that ;)
  d.center();

  // wire up cancel and x button.
  $("#modal-confirm #modal-cancel, #modal-confirm a.close").click(function (e) {
    d.toggle(false);
    return false;
  });

  // wire up OK button.
  $("#modal-confirm #modal-accept").click(function (e) {
    d.toggle(false);

    // actually handle the element. This has to happen here since it isn't an *actual* modal dialog.
    // It uses the element to continue proper execution.
    $.rails.handleLink(element);

    return false;
  });

  // show the dialog.
  d.toggle(true);
};

$(document).ready(function(){
  // jquery support
  $.fn.extend({
    center: function () {
      return this.each(function() {
        var top = ($(window).height() - $(this).outerHeight()) / 2;
        var left = ($(window).width() - $(this).outerWidth()) / 2;
        $(this).css({position:'absolute', margin:0, top: (top > 0 ? top : 0)+'px', left: (left > 0 ? left : 0)+'px'});
      });
    }
  });

  // modal stuff
  $("#modal-confirm").toggle(false);



  // $.rails overrides.

  // wire up our own custom confirm dialog. Also extend the function to take an element.
  $.rails.confirm = function(message, element) { return bootStrapConfirmModal(message, element); };

  $.rails.allowAction = function(element) {
    var message = element.data('confirm'),
        answer = false, callback;
    if (!message) { return true; }

    if ($.rails.fire(element, 'confirm')) {
      // le extension.
      answer = $.rails.confirm(message, element);
      callback = $.rails.fire(element, 'confirm:complete', [answer]);
    }
    return answer && callback;
  };

  $.rails.handleLink = function(link) {
    if (link.data('remote') !== undefined) {
      $.rails.handleRemote(link);
    } else if (link.data('method')) {
      $.rails.handleMethod(link);
    }
    return false;
  };

});

Answer 1

Here's a working demo for changing confirmation box in Rails: http://rors.org/demos/custom-confirm-in-rails

Examples for Boostrap, jQueryUI and Noty are provided.

Answer 2

I wrote a sample for Rails 3.1 to change the alerts using this solution, but instead of replacing the native alert with the bootstrap one, it does the following:

• Change the link/button text to 'Sure?' for 2 seconds
• If the link/button is clicked within 2 seconds, the action is performed
• Otherwise the link/button flips back to the old text and nothing happens.

Here is a gist: https://gist.github.com/2594409

This is following this discussion in the UX forum:

https://ux.stackexchange.com/questions/20741/action-confirmation-through-double-clicking

Answer 3

there is pull request with this feature which seems to work fine https://github.com/rails/jquery-ujs/pull/196