javascript - Bootstrap 3 : add confirm modal box for jQuery Inline delete row

标签 javascript jquery twitter-bootstrap bootstrap-modal

我有这个jQuery函数用于从MySQL删除行数据。这与jQuery确认一起使用,我需要添加Bootstrap 3模式框确认。

JS:

function deleteBox(id){
    if (confirm("Are you sure you want to delete this record?"))
    {
      var dataString = 'id='+ id;
      $("#flash_"+id).show();
      $("#flash_"+id).fadeIn(400).html('<img src="image/loading.gif" /> ');
      $.ajax({
      type: "POST",
      url: "delete.php",
      data: dataString,
      cache: false,
      success: function(result){
               if(result){
                    $("#flash_"+id).hide();
                    // if data delete successfully
                    if(result=='success'){
                         //Check random no, for animated type of effect
                         var randNum=Math.floor((Math.random()*100)+1);
                         if(randNum % 2==0){
                            // Delete with slide up effect
                            $("#list_"+id).slideUp(1000);
                         }else{
                            // Just hide data
                            $("#list_"+id).hide(500);
                         }

                    }else{
                         var errorMessage=result.substring(position+2);
                         alert(errorMessage);
                    }
              }
      }
      });
    }
}

HTML:

<a href="javascript:void()"><img alt="Delete" title="Delete" width="20" src="image/delete.jpg" onclick=deleteBox("1") border="0"></a>

如何为该功能添加 bootstrap 3 确认模式框?!

最佳答案

显然,您应该在 html 代码中实现模式框。该模式应该有两个按钮(okcancel),具有唯一的 id 属性(可能在 modal-footer 内部)分区)

# your modal code around...
  <div class="modal-footer">
    <button type="button" class="btn btn-danger" id="btnDeleteYes" href="#">Yes</button>
    <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
  </div>
# ...

点击btnDeleteYes应该会触发你的内部逻辑:

$('#btnDeleteYes').click(function () {
    var dataString = 'id='+ id;
    $("#flash_"+id).show();
    $("#flash_"+id).fadeIn(400).html('<img src="image/loading.gif" /> ');
    # here goes your logics with ajax query and so on
    # ...
    # you may also want to hide your modal box at some point
});

您也可以尝试bootbox.js,而不是从头开始实现它。它使用 Bootstrap 模式来创建对话框。这将使您无需编写模态 html 代码并手动实现回调。

您的代码如下所示:

bootbox.dialog({
  message: "Are you sure you want to delete this record?",
  title: "Confirm your choice",
  buttons: {
    confirmation: {
      label: "Yes, delete it",
      className: "btn-success",
      callback: function() {
        var dataString = 'id='+ id;
        $("#flash_"+id).show();
        $("#flash_"+id).fadeIn(400).html('<img src="image/loading.gif" /> ');
        # here goes your logics with ajax query and so on
        # ...
      }
    },
    refuse: {
      label: "No, leave it alive",
    },
  }
});

关于javascript - Bootstrap 3 : add confirm modal box for jQuery Inline delete row,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24342394/

相关文章:

javascript - 在 jquery 中使用 on() 时将参数传递给函数

css - 动态多列下拉菜单 - Angular2 和 Bootstrap

jquery - javascript函数引用和参数传递解释

javascript - 如何将 JSON 字符串附加到 HTML 预标记?

javascript - 我的 $.post 函数不返回任何数据

html - 如何在不同分辨率下沿着设备的宽度在同一条线上划分不同的 div?

javascript - Bootstrap 3 - 文本输入下的下拉搜索结果

javascript - jQuery/Javascript - 如何在按钮的值更改时触发事件?

javascript - React router v4 - 使用 HOC 的授权路由

javascript - Ajax 未加载