自定义导轨确认框(使用$ .rails.confirm覆盖)

Question

很长一段时间以来,我一直在修补这个问题.

我想用我自己推出的东西劫持默认的JS确认对话框.我想使用完全自定义的布局(bootstrap(来自twitter)对话框面板).

我所拥有的不起作用.它显示得很好,我可以点击按钮,它会消失.文档说明,如果是Ok,你应该返回true,如果是Cancel,你应该返回false.这很可爱,但它不起作用.看起来我需要一个回调或对最初调用该函数的对象的引用.即使后者也是不可能的,因为$ .rails.confirm只传递消息.

(这个问题的第一个答案非常有趣.我需要一种方法使其成为模态,以便等待返回自定义对话框.)

有人可以指出我正确的方向吗？我觉得我要打一些东西.硬!!jQuery UI只是一个选项,我可以使我的对话框看起来与我现在的对话框完全一样.

这是我有的:

这是放在我的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); };
});

然后最后在我看来:

<%= 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

好吧,我想出了一个方法......而且它并不漂亮.我基本上以实际元素传递给$ .rails.confirm方法的方式扩展了jquery-rjs.这样我至少知道如果在模态中按下OK按钮会发生什么.所以这是新的时髦代码.

我的新application.js.奇迹般有效.但我对我必须覆盖多少事情感到有些不安.我可能破坏了一些东西,我甚至都不知道它(rails.formSubmitSelector和/或rails.formInputClickSelector).所以如果你有更好的解决方案...... 给: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

这是一个改变Rails中确认框的工作演示:http://rors.org/demos/custom-confirm-in-rails

提供了Boostrap,jQueryUI和Noty的示例.

Answer 2

有带有此功能的拉取请求，该功能似乎工作正常 https://github.com/rails/jquery-ujs/pull/196