Bootstrap 3: добавить модальное окно подтверждения для строки удаления jQuery Inline

У меня есть эта функция jQuery для удаления данных строки из MySQL. Это работало с jQuery confirm, мне нужно добавить Bootstrap 3 modal box подтвердить.

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>

Как я могу добавить модальное окно подтверждения начальной загрузки 3 для этой функции?!


javascript jquery twitter-bootstrap bootstrap-modal
person Pink Code    schedule 21.06.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Очевидно, вы должны реализовать модальное окно в своем HTML-коде. Этот модал должен иметь две кнопки (ok и cancel) с уникальными атрибутами id (вероятно, внутри modal-footer div)

# 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, который использует модальные окна начальной загрузки для создания диалоговых окон. Это избавит вас от необходимости писать 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",
    },
  }
});
person twonegatives    schedule 21.06.2014
comment
пожалуйста, смотрите мое редактирование для HTML. Мне нужно onclick=deleteBox("1") для динамического идентификатора. - person Pink Code; 21.06.2014