Question

我需要通过Ajax从数据库中删除数据。当用户从delete html select中选择element选项时，它必须显示引导modal。然后，用户必须单击confirm delete才能开始删除过程。虽然我从JavaScript中得不到任何错误消息，但我怀疑问题来自JavaScript。

我的html选项如下：

delete和edit选项的ID也是必须删除或修改的帖子的ID。

注意：示例页面上有很多帖子，每个帖子都有select元素

<select id="all_options">
    <option id ="delete_option" data-toggle="modal" data-target="#modal_box" >Delete</option>
    <option id = "edit_option">Edit</option>
</select>

通常的Bootstrap Modal box如下close和delete按钮。当选择上面选择元素中的删除选项时，模式为box will show 。

<div id= "modal_box" class="modal fade" role="dialog" style = "display:none;">
    <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 id = "cancel_delete" type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button id = "confirm-delete" name = "confirm_delete" type="button" class="btn btn-primary">Delete</button>

            </div>
        </div>

  </div>
</div>

以下是我的JavaScript无效：

JavaScript将在上面的select元素中收集删除选项的Id，并将id发送到服务器以识别必须从数据库中删除的数据。

$(function(){

  $('.all_options').on('change', function () {
      var post_id = $(this).children(":selected").attr("id");
      if(post_id){
          //If delete button on the modal is clicked, start ajax deletion
          $('#confirm_delete').click(function(){
              $.ajax(
                {
                 url: "delete.php",
                 type: "POST",
                 data: {
                    id: post_id
                 },
                 success: function (data) {
                     if(data){
                         alert("Successful!");
                     }else{
                         alert("Delete Failed");
                     }
                }

             });
          }); 

      }
});

PHP文件是这样的：

$post_id = $_POST['id'];

$sql = "DELETE FROM test_ajax WHERE post_id = ?";

$stmt = $this->connect->prepare($sql);
$stmt->bind_param('s', $post_id);

$stmt->execute();

Answer 1

我认为你不能在选项标签上使用数据属性来打开模态。相反，您可以使用JavaScript打开模式。

选择删除选项后，您需要将选定的ID存储在某处。在我的演示中，我们将ID存储在变量中。

＆＃13;

$(function() {

  // we'll use this to hold current ID 
  var idToDelete;
  
  $('.all_options').on('change', function() {
    // check selected value (since you didn't specify value attribute to your options, it will use the text)
    if (this.value == 'Delete') {
      // store the ID to access it later e.g. variable or hidden input
      idToDelete = this.dataset.id;
      console.log('clicked Delete option: set idToDelete=' + idToDelete);

      // open modal
      $('#modal_box').modal('show');
    }
  });
  
  // no need to attach (and re-attach) click event handler inside the change event handler b/c the modal is already available in the DOM when the page loads
  $('#confirm-delete').click(function () {
    console.log('clicked Delete button: get idToDelete=' + idToDelete);
    // call AJAX 
  });
});

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<!-- ids are only supposed to appear once in the DOM, so use class if you have multiple of these -->

<!-- data attributes are useful to hold custom data -->
<select class="all_options" data-id="123">
    <option>Edit</option>
    <option>Delete</option>
</select>

<select class="all_options" data-id="456">
    <option>Edit</option>
    <option>Delete</option>
</select>

<select class="all_options" data-id="789">
    <option>Edit</option>
    <option>Delete</option>
</select>

<div id="modal_box" class="modal fade" role="dialog" style="display:none;">
  <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 id="cancel_delete" type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <button id="confirm-delete" name="confirm_delete" type="button" class="btn btn-primary">Delete</button>

      </div>
    </div>

  </div>
</div>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

＆＃13;

Answer 2

$('#all_options').代替$('.all_options').

Answer 3

试试这个snipet：

＆＃13;

$("#all_options").change(function(){
	var value = $(this).val();
  if(value=="delete"){
  	$("#modal-id").modal("show")
  }
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<select id="all_options">
    <option value="select">Select Option</option>
    <option value="delete" >Delete</option>
    <option value="edit" >Edit</option>
</select>
<div class="modal fade" id="modal-id">
	<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">Modal title</h4>
			</div>
			<div class="modal-body">
				
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
				<button type="button" class="btn btn-primary">Save changes</button>
			</div>
		</div>
	</div>
</div>

＆＃13;

选择Option，Show Bootstrap Modal，Confirm Delete然后通过Ajax从数据库中删除

3 个答案: