JQuery Aktualisierungsdaten nach dem Löschen

Question

Ich habe ein AJAX-Skript, das Daten auf einer Seite lädt. Die Daten werden ohne Probleme angezeigt. Das Problem ist, wenn ich auf eine Schaltfläche klicke, um einen Datensatz zu löschen. Der Datensatz wird jedoch gelöscht, die Daten werden bei Erfolg nicht aktualisiert. Gibt es eine Möglichkeit, die Daten zu aktualisieren, ohne die gesamte Seite neu zu laden?

<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

Nutzen Sie die komplette Funktion. Die komplette Funktion wird erst nach dem "Erfolg" von Ajax ausgeführt.

$(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(); 

       } 
      }); 
     }); 

ODER

einfach können Sie done() Funktion auf Ajax-Aufruf wie folgt anhängen ...

$(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(); 
       }); 
      });