使用Bootstrap和AJAX删除确认模式

Delete confirmation modal using Bootstrap and AJAX

本文关键字：确认 模式 删除 AJAX Bootstrap 使用      更新时间：2023-09-26

我正在尝试创建一个模态弹出窗口，并在模态主体内包含AJAX调用。该脚本包含AJAX。没问题。

这是调用模态的按钮(我正在使用TWIG模板)

<button class="btn btn-danger" data-id="{{ product.id }}">Delete</button>
这是jQuery脚本: 
$(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();
        }
      );
    })
  });
});

这是有模态

的页面
<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>

现在，如果点击删除按钮，我想删除选中的项目使用相关页面(例如:delete.php)

一种方法是附加一个点击处理程序并像这样设置位置

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

或者像这样

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

如果有产品ID，像这样发送到delete。php 

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