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

Question

我需要一些帮助，以了解如何使用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按钮的引导程序模式来完成这项工作。我认为这是它应该如何工作的，或者是否有更好的方法。

Answer 1

上触发了ajaxConfirmMessage

请遵循此代码结构，它将为您服务。

我在这里添加基本结构，您可以根据需要对其进行修改。我只是创建一个页面并将此代码直接添加到页面中。

• 请确保您的布局具有{% 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。代码部分仅返回虚拟成功响应。

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

它将显示bootstrap modal as confirm dialog。

如有任何疑问，请发表评论。