在这里,我需要一些有关如何使用ajaxConfirmMessage
来创建自定义确认对话框的帮助,而不是他从默认浏览器确认时获得的帮助。
给出确认选项后,在窗口对象上触发了ajaxConfirmMessage 。处理程序获得2个参数:事件对象和作为确认选项的一部分分配给处理程序的文本消息。这对于实现自定义确认逻辑/接口而不是本机javascript确认框很有用。
我现在有这个
$(window).on('ajaxConfirmMessage', function(event, message) {
// Stop the default confirm dialog
event.preventDefault();
// Okay Button
$('#okay-button').click(function() {
// Resolve the deferred object, this will trigger whatever was being confirmed
event.promise.resolve();
});
// Cancel Button
$('#cancel-button').click(function() {
// Reject the object, this will cancel whatever was being confirmed
event.promise.reject();
});
// Return a value so the framework knows we're handling the confirm
return true;
});
从谷歌搜索中了解到这一点。
这是我的按钮
<a href="" class="btn btn-sm btn-outline-danger" data-request ="onDelete" data-request-success="alert('Successfully Deleted')" data-request-data= "record: {{ post.id }}">Delete</a>
我只需要一些有关如何使用显示okay
和cancel
按钮的引导程序模式进行指导的方法。我认为这是它应该如何工作的,或者是否有更好的方法。
答案 0 :(得分:1)
请按照以下代码结构进行操作。
我在这里添加基本结构,您可以根据需要对其进行修改。我只是创建一个页面并将此代码直接添加到页面中。
{% scripts %}
,所以添加的js script using {% put scripts %}
将附加到页面的末尾。 jQuery and bootstrap-Js
已在页面上可用。<div class="container">
<!-- Button -->
<button
type="button"
class="btn btn btn-primary"
data-request ="onAjaxCall"
data-request-success="alert('Successfully Deleted')"
data-request-confirm="test-msg"
>
Confirm
</button>
</div>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" id="okay-button">Ok</button>
<button type="button" class="btn btn-warning" id="cancel-button">Cancel</button>
</div>
</div>
</div>
</div>
{% put scripts %}
<script>
$(window).on('ajaxConfirmMessage', function(event, message) {
// Stop the default confirm dialog
event.preventDefault();
// open our own bootstrap modal
$('#myModal').modal('show');
// Okay Button. we will unbind if any events are attached to it first
// reattach click event - this is required as this code will call each time
$('#okay-button').unbind().click(function() {
// hide modal
$('#myModal').modal('hide');
// Resolve the deferred object, this will trigger whatever was being confirmed
event.promise.resolve();
});
// Cancel Button
$('#cancel-button').unbind().click(function() {
// hide modal
$('#myModal').modal('hide');
// Reject the object, this will cancel whatever was being confirmed
event.promise.reject();
});
// Return a value so the framework knows we're handling the confirm
return true;
});
</script>
{% endput %}
function onAjaxCall() {
return ['result' => 'All Good!'];
}
它将显示
bootstrap modal as confirm dialog
。
如有疑问,请发表评论。