PHP-Schleife mit Ajax erneut ausführen

Question

Ich benutze Laravel 5.4.

Ich habe viele Kliniken in meiner Datenbank. Ich möchte nur alle Kliniken abrufen und einen Lösch-Button in jede Klinik setzen. Wenn ein Benutzer auf die Schaltfläche zum Löschen klickt, sollte die Klinik aus der Datenbank entfernt werden und die Kliniken sollten im Frontend aktualisiert werden.

Dies ist mein Code.

@foreach($doctor->clinics as $clinic) 
    <form method="POST" 
     action="{{url('doctors/'.$doctor->id.'/removeclinic/'.$clinic->id)}}" 
     id="formremoveclinic{{$clinic->id}}"> 
     {{csrf_field()}} 
     <button class="btn btn-sm btn-danger pull-right"> 
      <span class="glyphicon glyphicon-remove"></span> 
     </button> 
    </form> 
    <p class="text-muted">Clinic {{$i++}}</p> 
    <p class="text-muted">{{$clinic->address}}</p> 
    <hr> 
    <script> 
     $("#formremoveclinic{{$clinic->id}}").submit(function(e){ 
      $('#loading').show(); 
      e.preventDefault(); 
      $.ajax({ 
       url: "{{url('doctors/'.$doctor->id.'/removeclinic/'.$clinic->id)}}", 
       type: "DELETE", 
       data: new FormData(this), 
       contentType: false, 
       cache: false, 
       processData:false, 
       success: function(data){ 
        $('#loading').hide(); 
       }, 
       error: function(data){ 
        var errors = data.responseJSON; 
        console.log(errors); 
        $('#loading').hide(); 

       }   
      }); 
     }); 
    </script> 
@endforeach 

Ich möchte die Seite nicht neu laden, wenn eine Klinik entfernt wird. Also, wie kann ich diese Schleife erneut ausführen, wenn eine Klinik erfolgreich mit Ajax entfernt wurde.

Answer 1

Eine bessere Möglichkeit, dies zu erreichen, könnte sein, die Zeile einfach mit Javascript zu entfernen. In derselben Funktion, in der Sie den Loader ausblenden, können Sie das Formular auch aus dem Dom entfernen.

Wie so:

@foreach($doctor->clinics as $clinic) 
    <div id="clinic{{$clinic->id}}"> 
     <form method="POST" 
      action="{{url('doctors/'.$doctor->id.'/removeclinic/'.$clinic->id)}}" 
      id="formremoveclinic{{$clinic->id}}"> 
      {{csrf_field()}} 
      <button class="btn btn-sm btn-danger pull-right"> 
       <span class="glyphicon glyphicon-remove"></span> 
      </button> 
     </form> 
     <p class="text-muted">Clinic {{$i++}}</p> 
     <p class="text-muted">{{$clinic->address}}</p> 
     <hr> 
     <script> 
      $("#formremoveclinic{{$clinic->id}}").submit(function(e){ 
       $('#loading').show(); 
       e.preventDefault(); 
       $.ajax({ 
        url: "{{url('doctors/'.$doctor->id.'/removeclinic/'.$clinic->id)}}", 
        type: "DELETE", 
        data: new FormData(this), 
        contentType: false, 
        cache: false, 
        processData:false, 
        success: function(data){ 
         $('#loading').hide(); 

         // Fade out and remove the form element 
         $("#clinic{{$clinic->id}}").fadeOut(300, function() { 
          $(this).remove(); 
         }); 
        }, 
        error: function(data){ 
         var errors = data.responseJSON; 
         console.log(errors); 
         $('#loading').hide(); 

        }   
       }); 
      }); 
     </script> 
    </div> 
@endforeach 

Auf diese Weise müssen Sie keine andere Ajax-Funktion schreiben.