JQuery обновить данные после удаления

Question

У меня есть сценарий AJAX, который загружает данные на странице. Данные отображаются без проблем. Проблема заключается в том, когда я нажимаю кнопку, чтобы удалить запись. Запись удаляется, однако данные не обновляются после успеха. Есть ли способ обновить данные без перезагрузки всей страницы?

<script> 
    $(document).ready(function() { 
     ajaxFunction() 
    }); 
    function ajaxFunction() { 
     event.preventDefault(); 
     contentType: "application/json; charset=utf-8"; 
     dataType: "json"; 
     $.get('getShoppingCart.ashx', function (data) { 
      { 
       var result = ''; 
       $.each(data, function (index, value) { 
        result += '' + 
         '<div class="main-area bg-white">' + 
          '<div class="row">' + 
           '<div class="columns medium-12">' + 
            '<div class="row">' + 
             '<div class="medium-6 columns">' + 
              '<img class="img-responsive pull-right" id="RewardImage_' + index + '" src="' + value.RewardImage + '" />' + 
             '</div>' + 
             '<div class="medium-6 columns">' + 
              '<label id="RewardTitle_' + index + '">' + value.RewardTitle + '</label>' + 
              '<br />' + 
              '<label id="RewardDescription_' + index + '">' + value.RewardDescription + '</label>' + 
              '<br />' + 
              '<label id="RewardPoints_' + index + '">' + value.RewardPoints + '</label>' + 
              '<br />' + 
              '<label id="ExpirationDate_' + index + '">' + value.ExpirationDate + '</label>' + 
              '<br />' + 
              '<button type="button" id="' + value.RewardOfferID + '" class="btn">Remove Reward</button>' + 
              '<br />' + 
              '<br />' + 
             '</div>' + 
            '</div>' + 
           '</div>' + 
          '</div>' + 
         '</div>' 
       }); 
       if (!result) { 
        result = 'No Items in the Shopping Cart'; 
       }; 

       $('#result').html(result); 
      } 
     }) 
     }; 
     $(document).on('click', '.btn', null, function (event) { 
      event.preventDefault(); 
      var varID = this.id; 
      $.ajax({ 
       contentType: "application/json; charset=utf-8", 
       data: 'ID=' + varID, 
       url: "deleteCartItem.ashx", 
       dataType: "json", 
       success: function (data) { 
        ajaxFunction() 
       } 
      }); 
     }); 
</script> 

Answer 1

Использовать полную функцию. Полная функция выполняется только после «успеха» ajax.

$(document).on('click', '.btn', null, function (event) { 
      event.preventDefault(); 
      var varID = this.id; 
      $.ajax({ 
       contentType: "application/json; charset=utf-8", 
       data: 'ID=' + varID, 
       url: "deleteCartItem.ashx", 
       dataType: "json", 
       success: function (data) { 

       }, 
       complete: function(data){ 
       ajaxFunction(); 

       } 
      }); 
     }); 

ИЛИ

Просто вы можете добавить done() функцию на Ajax вызова, как это ...

$(document).on('click', '.btn', null, function (event) { 
       event.preventDefault(); 
       var varID = this.id; 
       $.ajax({ 
        contentType: "application/json; charset=utf-8", 
        data: 'ID=' + varID, 
        url: "deleteCartItem.ashx", 
        dataType: "json", 
        success: function (data) { 

        }  
       }).done(function() { 
       ajaxFunction(); 
       }); 
      });