我很长一段时间都在修补它。
我想用自己推出的东西劫持默认的JS确认对话框。我想使用完全自定义的布局（bootstrap（来自twitter）对话框面板。）
我所拥有的不起作用。它显示得很好，我可以点击按钮，它会消失。文档说明，如果是Ok，你应该返回true，如果是Cancel，你应该返回false。这很可爱，但它不起作用。看起来我需要一个回调或对最初调用该函数的对象的引用。即使是后者也是不可能的，因为$ .rails.confirm只传递消息。
（this问题的第一个答案非常有趣。我需要一种方法使其成为模态，以便等待返回自定义对话框。）
有人可以指出我正确的方向吗？我觉得我要打一些东西。硬！！ 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 GMT
好的，我想出了一个方法......而且它并不漂亮。我基本上以实际元素传递给$ .rails.confirm方法的方式扩展了jquery-rjs。这样我至少知道如果在模态中按下确定按钮会发生什么。所以这是新的时髦代码。
我的新应用程序.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;
};
});
答案 0 :(得分：5)
以下是更改Rails中确认框的工作演示：http://rors.org/demos/custom-confirm-in-rails
提供了Boostrap，jQueryUI和Noty的示例。
答案 1 :(得分：2)
我为Rails 3.1编写了一个示例，使用此解决方案更改警报，但不是使用引导程序替换本机警报，而是执行以下操作：
这是一个要点：https://gist.github.com/2594409
这是在UX论坛中的讨论之后：
https://ux.stackexchange.com/questions/20741/action-confirmation-through-double-clicking
答案 2 :(得分：1)
有这个功能的拉请求似乎工作正常 https://github.com/rails/jquery-ujs/pull/196
答案 3 :(得分：0)
我正在发布我的工作解决方案，以防它对任何人有帮助。当点击通过以下选择器匹配的链接或按钮时，此解决方案呈现Bootstrap模式：
$('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);