ruby-on-rails 自定义rails确认框(使用$.rails.confirm覆盖)

8gsdolmq  于 2022-11-19  发布在  Ruby
关注(0)|答案(4)|浏览(200)

我已经修了很久了。
我想劫持默认的JS确认对话框,我自己卷的东西。我想使用一个完全自定义的布局(引导程序(从twitter)对话框面板)。
我所拥有的不起作用。它显示得很好,我可以点击按钮,它就会消失。文档说,你应该返回true的情况下,确定和false的情况下,取消。这是非常可爱的,所有,但它不起作用。它看起来像我需要一个回调或引用的对象,原来调用的函数。甚至后者是不可能的,因为$. rails。确认只传递消息。
(The this问题的第一个答案非常有趣。我需要一种方法来使它成为模态的,以便它等待自定义对话框的返回。)
有人能给我指出正确的方向吗?我感觉我要拍什么东西了。很难!!jQuery UI只是一个选项,我可以让我的对话框看起来和我现在的对话框一模一样。
这是我所拥有的:
这是放在我的应用程序。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
好的,我找到了一种方法......它并不漂亮。我基本上扩展了jquery-rjs,将实际元素沿着给$.rails.confirm方法。这样我至少知道如果在模态中按下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;
  };

});
mrphzbgm

mrphzbgm1#

下面是一个在Rails中更改确认框的工作演示:https://web.archive.org/web/20121230034912/http://rors.org/demos/custom-confirm-in-rails
提供了Bootstrap、jQueryUI和Noty的示例。

2fjabf4q

2fjabf4q2#

我为Rails 3.1编写了一个示例来使用此解决方案更改警报,但它没有将本机警报替换为引导警报,而是执行以下操作:

  • 将链接/按钮文本更改为“确定?"2秒
  • 如果在2秒内单击链接/按钮,则执行操作
  • 否则,链接/按钮将翻转回旧文本,并且不会发生任何操作。

以下是要点:https://gist.github.com/2594409
以下是UX论坛中的讨论:
https://ux.stackexchange.com/questions/20741/action-confirmation-through-double-clicking

wvyml7n5

wvyml7n54#

我张贴我的工作解决方案的情况下,它可以帮助任何人。这个解决方案呈现一个引导模式时,点击链接或按钮匹配通过以下选择器:
$('a.ajaxLink, button.ajaxButton')

HAML代码

- genericConfirmationModalId = "genericConfirmationModal"
.modal.fade{:role => "dialog", :tabindex => "-1", id: genericConfirmationModalId }
  .modal-dialog{:role => "document"}
    .modal-content
      .modal-body
        %button.close{"aria-label" => "Close", "data-dismiss" => "modal", :type => "button"}
          %span{"aria-hidden" => "true"} ×

        %h3.text-center<
          Are you sure?

      .modal-footer
        .row<
          .col-md-6<
            = button_tag(type: 'button', class: "btn btn-primary btn-lg genericConfirmationModalNoBtn" ) { "No" }
          .col-md-6<
            = button_tag(type: 'button', class: "btn btn-danger btn-lg genericConfirmationModalYesBtn") { "Yes" }

JS代码

(function ($) {
  // ================ STARTS - CUSTOM rails_ujs CONFIRMATION DIALOG RELATED JS

  blockUI = function() {
    $.blockUI();
  };

  unblockUI = function() {
    $.unblockUI();
  };    

  // Reference: http://thelazylog.com/custom-dialog-for-data-confirm-in-rails/
  $.rails.confirmed = function(element) {
    hideGenericConfirmationModal();
    element.attr('data-confirmation-answer', '1');
    element.trigger('click.rails');
  }

  // Overridden version
  // Reference: https://github.com/rails/jquery-ujs/blob/master/src/rails.js#L88
  $.rails.allowAction = function(element) {
    var message = element.data('confirm'),
        answer = false, callback;
    if (!message) { return true; }

    var executeCustomBehavior = !!element.attr('data-confirmation-answer');

    if (executeCustomBehavior) {
      answer = element.attr('data-confirmation-answer') == '1' ? true : false;
      callback = $.rails.fire(element, 'confirm:complete', [answer]);
    } else {
      if ($.rails.fire(element, 'confirm')) {
        try {
          answer = $.rails.confirm(message);
        } catch (e) {
          (console.error || console.log).call(console, e.stack || e);
        }
        callback = $.rails.fire(element, 'confirm:complete', [answer]);
      }
    }

    return answer && callback;
  };

  bindblockUIOnAjaxLinks = function() {
    $('a.ajaxLink, button.ajaxButton').off('click').on('click', function() {
      var linkTriggersConfirmationDialog = !!$(this).attr('data-confirm');

      if (linkTriggersConfirmationDialog) {
        // Reference: http://stackoverflow.com/questions/19516654/rails-ujs-confirm-box-cancel-button-callback
        $(this).on('confirm:complete', function(e, response) {
          if(response) {
            blockUI(); // Block and Unblock UI was applicable in my case. It is not necessary to use this solution.
          } else {
            unblockUI();
          }
        });

        bindShowEventOnGenericConfirmationModal($(this));
        showGenericConfirmationModal();
        return false;

      } else {
        blockUI();
      }
    });
  };

  isGenericConfirmationModalAnswerYes = function() {
    return genericConfirmationModalAnswerHiddenField().val() == '1';
  };

  genericConfirmationModal = function() {
    return $("#genericConfirmationModal");
  };

  genericConfirmationModalYesBtn = function() {
    return genericConfirmationModal().find('.genericConfirmationModalYesBtn');
  };

  bindClickEventOnGenericConfirmationYesBtn = function(elementTriggeredConfirmation) {
    genericConfirmationModalYesBtn().off("click").on("click", function(event) {
      // console.log("generic confirmation modal yes button event callback");
      $.rails.confirmed(elementTriggeredConfirmation);
    });
  };

  genericConfirmationModalNoBtn = function() {
    return genericConfirmationModal().find('.genericConfirmationModalNoBtn');
  };

  bindClickEventOnGenericConfirmationNoBtn = function() {
    genericConfirmationModalNoBtn().off("click").on("click", function(event) {
      //    console.log("generic confirmation modal no button event callback");
      hideGenericConfirmationModal();
      unblockUI();
    });
  };

  showGenericConfirmationModal = function() {
    genericConfirmationModal().modal('show');
  };

  bindShowEventOnGenericConfirmationModal = function(elementTriggeredConfirmation) {
    genericConfirmationModal().off('shown.bs.modal').on('shown.bs.modal', function (event) {
      // console.log("generic confirmation modal shown event callback");
      bindHideEventOnGenericConfirmationModal();
      bindClickEventOnGenericConfirmationYesBtn(elementTriggeredConfirmation);
      bindClickEventOnGenericConfirmationNoBtn();
    })
  };

  hideGenericConfirmationModal = function() {
    genericConfirmationModal().modal('hide');
  };

  bindHideEventOnGenericConfirmationModal = function() {
    genericConfirmationModal().off('hidden.bs.modal').on('hidden.bs.modal', function (event) {
      // console.log("generic confirmation modal hidden event callback");
      // Nothing to handle as of now
    })
  };

  // ================ ENDS - CUSTOM rails_ujs CONFIRMATION DIALOG RELATED JS

}) (jQuery);

var ready;

ready = function() {
  bindblockUIOnAjaxLinks();
};

// References:
//  http://stackoverflow.com/questions/18769109/rails-4-turbo-link-prevents-jquery-scripts-from-working
//  http://stackoverflow.com/questions/18770517/rails-4-how-to-use-document-ready-with-turbo-links
$(document).ready(ready);
$(document).on('page:load', ready);

相关问题