Как запустить метод $ .ajax в диалоговом окне ok нажмите кнопку

Question

Я хочу удалить строку из моей таблицы html нажатием соответствующей кнопки удаления. Случается, что если я использую окно подтверждения, все будет хорошо, но я не хочу использовать поле подтверждения вместо того, чтобы я хотел использовать диалоговое окно с кнопкой ok, а при нажатии кнопки ok он должен выполнять ту же функцию, что и с помощью поля подтверждения. Я предоставляю как коды с окном подтверждения, так и другое с диалоговым окном. Помогите мне сделать то же самое с этим диалоговым окном. JQuery код подтверждающим коробки, которая работает мелко-

$(document).ready(function() 
{ 
    $('input[type=button]').click(function() 
    { 
     if (confirm("Are you sure you want to delete this row?")) 
     { 
      var ID = $(this).parent().parent().attr('id'); 
      var data = 'id=' + ID ; 
      var parent = $(this).parent().parent(); 

      $.ajax(
      { 
        type: "POST", 
        url: "delete.php", 
        data: data, 
        cache: false, 

        success: function() 
        { 
        parent.fadeOut('slow', function() {$(this).remove();}); 
        } 
      }); 
     } 
    }); 


}); 

код JQuery диалоговое окно с -

$(document).ready(function(){ 
$('#modal').dialog({ 
    autoOpen: false, 
    title: 'Delete Confirm Box', 
    width: 400, 
     buttons : [ 
      { 
       text: 'OK', 
       click: function() { 
        $("#modal").dialog('close'); 
         del_row(); 
         alert("done");   
       } 
      }, 
      { 
       text: 'Cancel', 
       click: function() { 
        $("#modal").dialog('close'); 
       } 
      } 
     ] 
}); 
$('input[type=button]').click(function(){ 
    $('#modal').dialog('open'); 
    }); 
}); 
and the part which i want to execute on ok click of dialog box- 
$('input[type=button]').click(function() 
{ 
    if (confirm("Are you sure you want to delete this row?")) 
    { 
     var ID = $(this).parent().parent().attr('id'); 
     var data = 'id=' + ID ; 
     var parent = $(this).parent().parent(); 

     $.ajax(
     { 
       type: "POST", 
       url: "delete.php", 
       data: data, 
       cache: false, 

       success: function() 
       { 
       parent.fadeOut('slow', function() {$(this).remove();}); 
       } 
     }); 
    } 
}); 

Answer 1

Вам нужно создать ID и parent как глобальные переменные и установить его в $('input[type=button]') функции мыши. Таким образом, вы можете использовать this. После этого, в ОК функции вашего модальных, поднимите АЯКС вызов:

var ID = 0; 
var parent = null; 

$('input[type=button]').click(function(){ 
    ID = $(this).parent().parent().attr('id'); 
    parent = $(this).parent().parent(); 
    $('#modal').dialog('open'); 
}); 

$('#modal').dialog({ 
    autoOpen: false, 
    title: 'Delete Confirm Box', 
    width: 400, 
    buttons : [ 
     { 
      text: 'OK', 
      click: function() { 
       $("#modal").dialog('close'); 

       var data = 'id=' + ID; 
       $.ajax(
       { 
        type: "POST", 
        url: "delete.php", 
        data: data, 
        cache: false, 
        success: function() 
        { 
         parent.fadeOut('slow', function(){ 
          $(this).remove(); 
         }); 
        } 
       });  
      } 
     }, 
     { 
      text: 'Cancel', 
      click: function() { 
       $("#modal").dialog('close'); 
      } 
     } 
    ] 
}); 

Answer 2

Я не хотел бы ввести глобальные переменные в мой код, так что я нашел работу вокруг для этого с помощью функции addClass Jquery. Просто добавьте класс, чтобы идентифицировать элемент html, который нужно удалить в коде, чтобы его можно было фильтровать/искать внутри внутри модального.

$('input[type=button]').click(function(){ 
    $(this).parent().parent().addClass("ToBeDeleted"); 
    $('#modal').dialog('open'); 
}); 

$('#modal').dialog({ 
    autoOpen: false, 
    title: 'Delete Confirm Box', 
    width: 400, 
    buttons : [ 
     { 
      text: 'OK', 
      click: function() { 
       $("#modal").dialog('close'); 

       var $parent = $(".ToBeDeleted"); 
       var ID = $parent.attr('id'); 
       var data = 'id=' + ID; 
       $.ajax(
       { 
        type: "POST", 
        url: "delete.php", 
        data: data, 
        cache: false, 
        success: function() 
        { 
         $parent.fadeOut('slow', function(){ 
          $(this).remove(); 
         }); 
        } 
       });  
      } 
     }, 
     { 
      text: 'Cancel', 
      click: function() { 
       $("#modal").dialog('close'); 
      } 
     } 
    ] 
}); 

Теперь, так как элемент мы добавили класс $(this).parent().parent() становится удален с помощью функции remove(), мы не оставить никаких следов класса мы добавили в наш код. Следовательно, это не помешает повторному выполнению кода (скажем, если у вас в коде есть несколько input[type=button].)