我已经修了很久了。
我想劫持默认的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;
};
});
4条答案
按热度按时间mrphzbgm1#
下面是一个在Rails中更改确认框的工作演示:https://web.archive.org/web/20121230034912/http://rors.org/demos/custom-confirm-in-rails
提供了Bootstrap、jQueryUI和Noty的示例。
2fjabf4q2#
我为Rails 3.1编写了一个示例来使用此解决方案更改警报,但它没有将本机警报替换为引导警报,而是执行以下操作:
以下是要点:https://gist.github.com/2594409
以下是UX论坛中的讨论:
https://ux.stackexchange.com/questions/20741/action-confirmation-through-double-clicking
nkoocmlb3#
此功能似乎工作正常https://github.com/rails/jquery-ujs/pull/196,但有拉取请求
wvyml7n54#
我张贴我的工作解决方案的情况下,它可以帮助任何人。这个解决方案呈现一个引导模式时,点击链接或按钮匹配通过以下选择器:
$('a.ajaxLink, button.ajaxButton')
HAML代码
JS代码