Laravel einfache Crud mit Jquery Ajax

Question

Ich versuche, eine Zeile aus einer Tabelle mit Jquery Ajax zu löschen. Nach einigen Versuchen kann ich nicht herausfinden, warum mein Code (Teil löschen) nicht funktioniert, da ich neu mit Ajax und Javascript bin. Das Laden von Daten mit AJAX vom Server funktioniert einwandfrei und das Skript hat keinen Konsolenfehler. Wenn ich delete drücke, sehe ich nichts auf der Netzwerkkarte. Hier ist mein Code:

routes.php

Route::delete('users/{id}','AjaxController@destroy'); 

AjaxController.php

public function destroy($id) 
    { 
     $user = User::findOrFail($id); 
     $user->delete(); 
    } 

Ansicht:

<table id="users" class="table table-bordered"> 
      <thead> 
       <tr> 
       <th>Name</th> 
       <th>Phone</th> 
       <th>Action</th> 
       </tr> 
      </thead> 
      <tbody id="abc"> 

      </tbody> 
      </table> 

Skript:

$(document).ready(function(){ 
     var $tbody = $('#abc'); 

     // getting data from server 
     $.ajax({ 
      type : 'GET', 
      url : 'api/users', 
      success: function(users) { 
      $.each(users, function(i, user){ 
       $tbody.append('<tr id="user_' + user.id + '"><td>'+user.name+'</td><td>'+user.phone+'</td><td><button type="button" class="btn btn-xs btn-danger" id="delete" value="'+user.id+'" name="button">Delete</button></td></tr>'); 
      }); 
      }, 
      error: function(){ 
      alert('error loading data'); 
      } 
     }); 

      // deleting data 
      $('#delete').on('click', function(e){ 
      var user_id = $(this).val(); 
      $.ajaxSetup({ 
       headers: { 
        'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content') 
       } 
      }) 
      e.preventDefault(); 
      var user = { 
       id : user_id 
      }; 
      $.ajax({ 
       type: 'DELETE', 
       url : '/user/'+user.id, 
       success : function(deleteUser) 
       { 
       $("#user_" + user_id).remove(); 
       }, 
       error : function() 
       { 
       alert('error deleting data'); 
       } 
      }); 
     }); // deleting block ends 
     }); 
    }); 

Answer 1

Das Problem hier ist, dass Sie die gleichen id immer wieder verwenden. Dieses Problem wird jedoch zusätzlich durch die Tatsache verstärkt, dass Sie den Inhalt dynamisch einfügen, während Ihre Ereignisbindung nur Elemente berücksichtigt, die beim Laden der Seite verfügbar sind. Lasst uns das alles beheben. Zuerst müssen wir die ID weglassen.

class="btn btn-xs btn-danger" id="delete" value="'+user.id+'" 

Muss

class="btn btn-xs btn-danger btn-delete" value="'+user.id+'" 

Große geändert werden. Wir haben btn-delete verwendet. Dies ist nicht spezifisch für diese spezielle Benutzerfunktionalität. Wie CRUD funktioniert, sollten Sie in der Lage sein, diesen Code für jedes einzelne Modell, mit dem Sie über den CRUD-Controller interagieren, wiederzuverwenden.

Jetzt müssen wir unsere Ereignisbindung delegieren, und wir werden auch die Schaltfläche generischer machen, wie im vorherigen Absatz besprochen. Aus Gründen der Post-Länge, werde ich nur zeigen, was Sie-sollte-Ihr Javascript eingerichtet haben mögen.

$('table').on('click', '.btn-delete', function(e){ 
    e.preventDefault(); 

    var $btn = $(this), 
     $table = $btn.closest('table'); 

    $.ajax({ 
     url: $table.data('resource') . '/' . $btn.val(), 
     type: 'delete' 
    }).done(function(response){ 
     console.log(response); 
    }).error(function(x,t,m){ 
     console.warn(x,t,m); 
    }); 
}); 

Das Token an die top der Datei bewegt werden kann, braucht es nicht verschachtelt werden:

$.ajaxSetup({ 
    headers: { 
     'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content') 
    } 
}); 

Schließlich müssen wir unsere data-resource Eigentum an unseren Tisch befestigen:

<table ... data-resource="users" 

Jetzt haben Sie ein wiederverwendbares Modell und müssen nur eine data-resource="model"-Eigenschaft an Ihre Tabelle anhängen, und eine Schaltfläche mit einer Klasse von btn-delete ein Wert mit der id der Entität.