Я занимаюсь этим долгое время.
Я хотел бы захватить диалоговое окно подтверждения JS по умолчанию с чем-то, что я сделал. Я хотел бы использовать полностью настраиваемый макет (диалоговое окно bootstrap (из twitter)).
У меня нет работы. Это хорошо проявляется, и я могу щелкнуть по кнопкам, и это исчезнет. В документации говорится, что вы должны вернуть true в случае Ok и 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 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 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
Хорошо, я понял способ... и это некрасиво. Я в основном расширил jquery-rjs таким образом, что фактический элемент передается вместе с методом $.rails.confirm. Таким образом, я, по крайней мере, знаю, что должно произойти, если кнопка OK нажата в модальном режиме. Итак, вот новый классный код.
Мой новый application.js. Работает как шарм. Но я немного обеспокоен тем, сколько вещей мне пришлось переопределить. Я, вероятно, что-то сломал, и я даже не знаю об этом (rails.formSubmitSelector и/или rails.formInputClickSelector). Итак, если у вас есть лучшее решение... дайте: D спасибо!
function bootStrapConfirmModal(message, element) {
// get a handle on the modal div (that 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 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;
};
});