title: Custom rails confirm box (with $.rails.confirm override)
body: <p>I've been tinkering with this for a long long time.</p>
  
  <p>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).</p>
  
  <p>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.</p>
  
  <p>(The first answer from <a href="https://stackoverflow.com/questions/4421072/jquery-ui-dialog-instead-of-alert-for-rails-3-data-confirm-attribute">this</a> question is pretty interesting. I need a way to make it modal so it waits for the return of the custom dialog.)</p>
  
  <p>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.</p>
  
  <p>Here is what I have:</p>
  
  <p>This is placed in my application.erb</p>
  
  <pre><code>&lt;div id="modal-confirm" class="modal"&gt;
    &lt;div class="modal-header"&gt;
      &lt;h3&gt;Are you sure?&lt;/h3&gt;
      &lt;a href="#" class="close"&gt;×&lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="modal-body"&gt;
      &lt;p&gt;{{VALUE}}&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="modal-footer"&gt;
      &lt;a id="modal-accept" href="#" class="btn primary"&gt;OK&lt;/a&gt;
      &lt;a id="modal-cancel" href="#" class="btn secondary"&gt;Cancel&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>javascript.js:</p>
  
  <pre><code>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 &gt; 0 ? top : 0)+'px', left: (left &gt; 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); };
  });
  </code></pre>
  
  <p>and then finally in my view:</p>
  
  <pre><code>&lt;%= link_to 'delete customer', customer_path(@customer), :class =&gt; 'btn danger', :method =&gt; :delete, :confirm =&gt; "Are you sure you would like to delete '#{@customer.name}'?" %&gt;
  </code></pre>
  
  <hr>
  
  <p>@ 23:46 GMT</p>
  
  <p>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.</p>
  
  <p>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 ... <em>give</em> :D thx!</p>
  
  <pre><code>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 &gt; 0 ? top : 0)+'px', left: (left &gt; 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 &amp;&amp; callback;
    };
  
    $.rails.handleLink = function(link) {
      if (link.data('remote') !== undefined) {
        $.rails.handleRemote(link);
      } else if (link.data('method')) {
        $.rails.handleMethod(link);
      }
      return false;
    };
  
  });
  </code></pre>