在 octobercms 中使用 ajaxConfirmMessage 创建自定义确认对话框

Question

我需要一些帮助，了解如何使用 ajaxConfirmMessage 创建自定义确认对话框，而不是从文档中说的默认浏览器确认。

ajaxConfirmMessage triggered on the window object when confirm option is given. The handler gets 2 parameters: the event object and text message assigned to the handler as part of confirm option. This is useful for implementing custom confirm logic/interface instead of native javascript confirm box.

我现在有了这个

$(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 按钮的 bootstrap 模式来完成这项工作。我在想它应该如何工作，或者是否有更好的方法。

Answer 1

请遵循此代码结构，它将适合您。

I am adding basic structure here you can modify it as you like. I am just creating a page and adding this code directly to the page.

确保您的布局具有 {% scripts %}，因此添加的 js script using {% put scripts %} 将附加到页面末尾。
我假设 jQuery and bootstrap-Js 已在页面上可用。

1。页面的 HTML 部分

<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">&times;</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 %}

2。仅 return 虚拟成功响应的代码部分。

function onAjaxCall() {
    return ['result' => 'All Good!'];
}

It will show you bootstrap modal as confirm dialog.

如有疑问请评论。

在 octobercms 中使用 ajaxConfirmMessage 创建自定义确认对话框

Creating a custom confirm dialog using ajaxConfirmMessage in octobercms

octobercms

1。页面的 HTML 部分

2。仅 return 虚拟成功响应的代码部分。