Delete confirmation modal using Bootstrap and AJAX

Question

I am trying to create a modal pop up and include an AJAX call inside the modal body. The script, included AJAX. works fine.

Here is the button which calls the modal (I am working with TWIG templates)

<button class="btn btn-danger" data-id="{{ product.id }}">Delete</button>

This is the jQuery script:

$(document).ready(function() {
  $('[data-id]').each(function() {
    var $this = $(this),
      id = $this.data('id');
    $this.on('click', function(event) {
      event.preventDefault();
      $.post('{{ path('dashboard_ajax ') }}', {
          'id': id
        },
        function(details) {
          var $modal = $(details);
          $('#confirm-delete').remove();
          $('body').append($modal);
          $modal.modal();
        }
      );
    })
  });
});

And this is the page with the modal

<div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">

      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Confirm Delete</h4>
      </div>

      <div class="modal-body">

        <div class="alert alert-danger" role="alert">

          <p>Do you really want to delete <b>{{ product.name }}?</b></p>

        </div>

        <img src="{{ asset('uploads/product_images/') }}{{ product.image }}" style="width: 240px;" class="img-responsive thumbnail" />
      </div>

      <div class="modal-footer">
        <button type="button" id="misha" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <a class="btn btn-danger btn-ok">Delete</a>
      </div>
    </div>
  </div>

Now, If click on the delete button I would like remove the selected item using the related page (example: delete.php)

Answer 1

One way you can do is by attaching a click hander and setting the location like this

window.location.href = 'delete.php';

Or something like this

<a class="btn btn-danger btn-ok" href="delete.php">Delete</a>

If you have the product ID, that be sent to delete.php like this

<a class="btn btn-danger btn-ok" href="delete.php?ID={{ product.id }}">Delete</a>