用ajax重新执行php循环

问题描述：

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.

我正在使用laravel 5.4。 p>

我的数据库中有很多诊所。我只是想检索所有的诊所，并在每个诊所都放一个删除按钮。每当用户点击删除按钮时，应从数据库中删除诊所，并在前端更新诊所。 p>

这是我的代码。 p>

  @foreach（$ doctor-＆gt; clinics as $ clinic）
＆lt; form method =“POST”
 action =“{{url（'doctors /'.$ doctor-＆gt; id。  '/removeclinic/'.$clinic->id)}}"
 id =“formremoveclinic {{$ clinic-＆gt; id}}”＆gt; 
 {{csrf_field（）}} 
＆lt; button class  =“btn btn-sm btn-danger pull-right”＆gt; 
＆lt; span class =“glyphicon glyphicon-remove”＆gt;＆lt; / span＆gt; 
＆lt; / button＆gt; 
＆lt; / form＆gt; \  n＆lt; p class =“text-muted”＆gt; Clinic {{$ i ++}}＆lt; / p＆gt; 
＆lt; p class =“text-muted”＆gt; {{$ clinic-＆gt; address}}＆lt  ; / p＆gt; 
＆lt; hr＆gt; 
＆lt; script＆gt; 
 $（“＃formremoveclinic {{$ clinic-＆gt; id}}”）。submit（function（e）{
 $（'#loading  '）。show（）; 
 e.preventDefault（）; 
 $ .ajax（{
 url：“{{url（'doctors /'.$ doctor-＆gt; id。'/ removeclinic /'.$  CLI  nic-＆gt; id）}}“，
类型：”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（）; 
 
} 
}）; 
}）; 
＆lt; / script＆gt; 
 @ endforeach 
  code>  pre>  
 
 每当诊所被移除时，我都不想重新加载页面。 那么，每当使用ajax成功删除诊所时，如何重新执行此循环。 p> 
  div>

答

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.

用ajax重新执行php循环

相关推荐