0

I have this jQuery function for delete row data from MySQL using Ajax. This worked with jQuery confirm, BUT I need to add Bootstrap 3 modal box confirm(YES/NO) before delete row.

     function deleteBox(id){
  if (confirm("Are you sure you want to delete this record?"))
  {
    var dataString = 'id='+ id;
    $("#flash_"+id).show();
    $("#flash_"+id).fadeIn(1000).html('<img src="../img/select2-spinner.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

                               // Delete with slide up effect
                               $("#list_"+id).slideUp(600);

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

HTML : 

<div class="box-body">
    <ul class="todo-list ui-sortable">
        <li class="list" id="list_3">   <span class="handle"><i class="fa icon-ellipsis-vertical icon-large"></i> <i class="fa icon-ellipsis-vertical icon-large"></i></span>
    <span class="tools"><a href="javascript:void()"><i alt="Delete" title="Delete" class="icon-remove-sign icon-large" onclick=deleteBox("3")></i>delete</a></span>
title/sedcription <span class="flash" id="flash_3"></span>
    <small class="label label-success pull-right"><i class="icon-time"></i>date</small>

        </li>
        <li class="list" id="list_5">   <span class="handle"><i class="fa icon-ellipsis-vertical icon-large"></i> <i class="fa icon-ellipsis-vertical icon-large"></i></span>
    <span class="tools"><a href="javascript:void()"><i alt="Delete" title="Delete" class="icon-remove-sign icon-large" onclick=deleteBox("5")></i>delete</a></span>
 title/sedcription <span class="flash" id="flash_5"></span>
    <small class="label label-success pull-right"><i class="icon-time"></i>date</small>

        </li>
    </ul>
</div>

How do I add bootstrap 3 confirm modal box for this function?!

Demo fiddle

matthias_h
  • 11,356
  • 9
  • 22
  • 40
o-O
  • 75
  • 1
  • 1
  • 8
  • one simple workaround is to bind the delete request to modal yes button click event. – code-jaff Oct 16 '14 at 17:35
  • @code-jaff: can u write code and more details in answer?! – o-O Oct 16 '14 at 18:49
  • these type of questions are already in SO, for eg. please look at this ans http://stackoverflow.com/a/22637301/1592398 – code-jaff Oct 17 '14 at 15:48
  • 1
    possible duplicate of [confirm delete using bootstrap 3 modal box](http://stackoverflow.com/questions/22636819/confirm-delete-using-bootstrap-3-modal-box) – code-jaff Oct 17 '14 at 15:49

0 Answers0