SweetAlert подтверждают с помощью запроса Ajax

Question

Я новичок в Javascript - кодирую его в первый раз. Я пытаюсь сделать кнопку с подтверждением удаления с SweetAlert. Ничего не происходит, когда я нажимаю кнопку onclick="confirmDelete()". Этот код может быть просто крабом, но вот он:

<script type="text/javascript"> 
    function confirmDelete() { 
     swal({ 
      title: "Are you sure?", 
      text: "You will not be able to recover this imaginary file!", 
      type: "warning", 
      showCancelButton: true, 
      confirmButtonColor: "#DD6B55", 
      confirmButtonText: "Yes, delete it!", 
      closeOnConfirm: false 
     )}, 
      $.ajax({ 
       url: "scriptDelete.php", 
       type: "POST", 
       data: {id: 5}, 
       dataType: "html", 
       success: function() { 
        swal("Done!","It was succesfully deleted!","success"); 
       } 
      }); 
    } 
</script> 

<a href="#" onclick="confirmDelete()">Delete</a> 

Можно ли добавить предупреждение, если удаление не удалось?

Answer 1

Если я правильно понимаю ваш вопрос, вы спрашиваете, как обрабатывать состояние ошибки в запросе Ajax. Параметры Ajax имеет атрибут ошибки и он может быть использован как этот

$.ajax({ 
    .... other settings you already have 
    error: function (xhr, ajaxOptions, thrownError) { 
    swal("Error deleting!", "Please try again", "error"); 
    } 
}); 

Кроме того, вы призываете swal в неправильном направлении. Swal имеет функцию обратного вызова, как этот

swal({settings}, function(isConfirm){}); 

Общий код будет выглядеть примерно как этот

function confirmDelete() { 
    swal({ 
     title: "Are you sure?", 
     text: "You will not be able to recover this imaginary file!", 
     type: "warning", 
     showCancelButton: true, 
     confirmButtonColor: "#DD6B55", 
     confirmButtonText: "Yes, delete it!", 
     closeOnConfirm: false 
    }, function (isConfirm) { 
     if (!isConfirm) return; 
     $.ajax({ 
      url: "scriptDelete.php", 
      type: "POST", 
      data: { 
       id: 5 
      }, 
      dataType: "html", 
      success: function() { 
       swal("Done!", "It was succesfully deleted!", "success"); 
      }, 
      error: function (xhr, ajaxOptions, thrownError) { 
       swal("Error deleting!", "Please try again", "error"); 
      } 
     }); 
    }); 
} 

Здесь демонстрационный http://jsfiddle.net/dhirajbodicherla/xe096w10/33/

Answer 2

Вы делаете ошибку в swal({)} должно быть swal({})

Обновленный код:

<script type="text/javascript"> 
    function confirmDelete() { 
     swal({ 
      title: "Are you sure?", 
      text: "You will not be able to recover this imaginary file!", 
      type: "warning", 
      showCancelButton: true, 
      confirmButtonColor: "#DD6B55", 
      confirmButtonText: "Yes, delete it!", 
      closeOnConfirm: false 
     }, 
     function(isConfirm){ 
      if (isConfirm) { 
      $.ajax({ 
       url: "scriptDelete.php", 
       type: "POST", 
       data: {id: 5}, 
       dataType: "html", 
       success: function() { 
        swal("Done!","It was succesfully deleted!","success"); 
       } 
      }); 
      }else{ 
       swal("Cancelled", "Your imaginary file is safe :)", "error"); 
      } 
     }) 
    } 
</script> 

Answer 3

я наконец получил эту работу на что один чувак 3 года отныне.

function dropConfig(config_index){ 

    swal({ 
    title: "WARNING:", 
    text: "Are you sure you want to delete this connection?", 
    type: "warning", 
    inputType: "submit", 
    showCancelButton: true, 
    closeOnConfirm: true, 
    timer: 2000 
     }, //end swal } 


function(isConfirm) { 
     if (isConfirm == true) { 

     //do the ajax stuff. 
     $.ajax({ 
      method: "POST", 
      url: "/drop_config", 
      data: {"curr_config": $("#curr_conf_conn_name_" + config_index).val()}}) 
      .success(function(msg) { 
      show_notification(msg,"success"); 
      setInterval(function() {.reload(); 
      }, 2500);}) 
      .error(function(msg) {show_notification(msg.responseText,"danger");}); 




     } // end if } 
    }); // end function } & end swal) 
}  // end function } 

Answer 4

Пробуйте этот код. Он работает отлично для меня.

$('.delete-confirm').on('click', function() { 
    var postID = $(this).val(); 
    console.log(postID); 
    swal({ 
     title: "Are you sure?", 
     text: "If you delete this post all associated comments also deleted permanently.", 
     type: "warning", 
     showCancelButton: true, 
     closeOnConfirm: false, 
     showLoaderOnConfirm: true, 
     confirmButtonClass: "btn-danger", 
     confirmButtonText: "Yes, delete it!", 
    }, function() { 
     setTimeout(function() { 
      $.post("delete.php", { 
        id: postID 
       }, 
       function(data, status) { 
        swal({ 
          title: "Deleted!", 
          text: "Your post has been deleted.", 
          type: "success" 
         }, 
         function() { 
          location.reload(); 
         } 
        ); 
       } 
      ); 

     }, 50); 
    }); 
});