Ad

Creating A Custom Confirm Dialog Using AjaxConfirmMessage In Octobercms

- 1 answer

I need some help here on how to create custom confirm dialog using ajaxConfirmMessage instead of he default browser confirm as from the documentation it say.

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.

I have this now

$(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;
});

Got that from googling about it.

This is my button

 <a target="_blank" rel="nofollow noreferrer" 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> 

I just need some guidance on how to make this work using a bootstrap modal that shows the okay and cancel button. I am thinking that is how it should work, or if there is a better way to it.

Ad

Answer

Please follow this code structure it will work for you.

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.

  • Make sure your layout has {% scripts %} so added js script using {% put scripts %} will append to the end of page.
  • I am assuming jQuery and bootstrap-Js already available on page.

1. Page's HTML section

<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. Code section to just return dummy success response.

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

It will show you bootstrap modal as confirm dialog.

If any doubts please comment.

Ad
source: stackoverflow.com
Ad