подтвердить удаление с помощью AJAX

Question

Как мы можем подтвердить удаление элемента массива в результате вызова ajax?

У меня есть массив:

$.ajax({  
           url: "recursive.php",
           method:"POST",
           dataType: "json",       
           success: function(data)  
               {
                  $('#treeview').treeview({
                      data: data
                  });
               }   
      });

В моем recursive.php У меня есть этот код:

$arr = array(
        'text' => '<img src="img/pdf.png"><a href="delete.php?doc='.$sub_data["code"].' "target="_blank">'.$sub_data["n_doc"].'</a>
       '
       );  

В этом <a href мне нужно подтвердить перед удалением. в delete.php у меня есть:

$sql = mysqli_query($conn, ' DELETE FROM saisie WHERE code = "'.$doc.'" ') or die (mysqli_error());

Answer 1

Самый простой способ отображения подтверждения при добавлении AJAX в DOM - это связать делегированный прослушиватель событий в функции DOMReady вашего представления.

Поскольку jQuery связывает обработчики событий во время состояния DOMReady, он не будет привязывать дополнительные элементы в функции ajax.success, если в ответ не включен javascript и dataType is «script» или вы не проанализируете переменную data из функции успеха, и событие добавляется вручную.

Предполагается, что элемент с id="treeview" уже существует.

<script type="text/javascript">
jQuery(function($) {
    $(document).on('click', 'a[href^="delete.php"]', function(e) {
        return window.confirm('Are you sure you want to delete this file?');
    });

    $.ajax({
        url: "recursive.php",
        method:"POST",
        dataType: "json",       
        success: function(data) {
            $('#treeview').treeview({
                data: data,
                selectedBackColor: 'rgb(211,211,211)',
                selectedColor: '#4A4A49',
                enableLinks:true,
                collapsedall: true
            });
        }
    });
});
</script>
<div id="treeview"></div>

Это работает, сообщая jQuery отслеживать все щелчки внутри элемента #treeview для запускающего элемента <a href="delete.php">. В частности, href^="delete.php" означает элемент <a>, где href начинается с delete.php. Если он найден, выполняется функция обратного вызова и отображается диалоговое окно подтверждения.

---

Если вы добавите атрибут class к элементу привязки recursive.php, вы можете заменить a[href^="delete.php"] на a.classname.

Пример https://jsfiddle.net/ub1hw9tn/

$arr = array(
    'text' => '<img src="img/pdf.png"><a class="delete" href="delete.php?doc='.$sub_data["code"].'" target="_blank">'.$sub_data["n_doc"].'</a>'
); 

Тогда в вашем javascript

$(document).on('click', 'a.delete', function(e) {
    if (!window.confirm('Are you sure you want to delete this file?')) {
       e.preventDefault();
    }
});

Answer 2

Сделайте еще один вызов ajax в функции успеха:

   $(document).ready(function(){
       $.ajax({  
           url: "recursive.php",
           method:"POST",
           dataType: "json",       
           success: function(data)  
               { 
                   $(document).on('click', '.btn_supp', function(){
                       if(confirm("do you want to delete this file?")){
                         $.ajax({  
                          url: "delete.php",
                          method:"POST",
                           dataType: "json",       
                         success: function(data)  
                         {
                         alert("deleted");
                         });
                        }   
                        });
                       }
                   });   
                  $('#treeview').treeview({
                      data: data,
                      selectedBackColor: 'rgb(211,211,211)',
                      selectedColor: '#4A4A49',
                      enableLinks:true,
                      collapsedall: true
                  });
               }   
      });`