用ajax重新执行php循环

Question

I am using laravel 5.4.

I have many clinics in my database. I just want to retrieve all the clinics and put a delete button on each clinic. Whenever a user clicks the delete button the the clinic should be removed from the database and clinics should be updated in the front end.

This is my 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

I don't want to reload the page whenever a clinic is removed. So, how can I re-execute this loop, whenever a clinic is successfully removed using ajax.

Answer 1

A better way to approach this might be to just remove the row using javascript. In the same function where you hide the loader, you can also remove the form from the dom.

Like 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

This way you don't have to write another ajax function.