如何在照片删除后重定向到模态 - How to redirect to modal after photo delete - Laravel

我有一个用户可以用来输入Trips字段的模态。其中一个字段是Multiple Photo上传输入字段。当用户编辑旅行时，所有的照片都会显示在那个模式中。用户可以在模态中一次删除一张照片。

问题是当我点击那个按钮删除照片时，它会将我重定向回那个页面，但模态消失了。这有点烦人，尤其是当你想删除另一张照片或其他东西时。

如何避免在重定向后关闭模态?

这是我的模态(缩短):

<div class="modal fade" id="siteMessage" tabindex="-1" role="dialog" aria-labelledby="siteMessage">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="title">Some Trip Name Here</h4>
                </div>
                <div class="modal-body" id="body">
{{ Form::model( $trip, ['route'=>['user.listings.trips.create',$listing->slug], 'method'=>'POST', 'id' => 'trip_form', 'files' => true ]) }}
<!-- Add Trip Photos -->
<div class="form-group">
    <label for="photos[]" class="control-label">Photos</label>
    <input class="form-control" name="photos[]" type="file" id="photos[]">
</div>
    <div class="col-md-12 no-padding">
    @foreach( $trip->photos as $key => $photo )
        <div class="col-xs-6 col-sm-6 col-md-4">
            <img src="{{$photo->url}}" alt="{{$photo->name}}" class="img-responsive">
            <a href="{{ route('user.listings.trip.photo.destroy',[$listing->slug,$photo->id]) }}" class="pull-right">
                <i class="fa fa-trash" style="color: red;"></i>
            </a>
        </div>
    @endforeach
    </div>
{{ Form::close() }}
                  </div>
              </div>
        </div>
    </div>

这是我的删除方法:

 public function deletePhoto(Request $request, $id) {
        Photo::where('id', $id)->first()->delete();
        return redirect()->back();
    }

这是我删除照片时的请求URL

http://mywebsite.com/listings/expedition-wild-2/trips/photos/2456/destroy

您应该使用Javascript和AJAX调用来防止页面重新加载。当页面重新加载时(在您使用return redirect()->back()的情况下)，它将使页面具有其原始状态，其中模式尚未打开。

这个想法是，用javascript，当你点击"删除照片"，它会运行一个http请求到你的服务器路由/listings/expedition-wild-2/trips/photos/2456/destroy，服务器将尝试删除照片并发送响应回来。然后你的javascript代码将接收响应并按照你喜欢的方式处理它。例如，向用户显示一条消息"照片已删除!"这样，页面将永远不会重新加载，你的模式将保持打开状态。

你的delete方法看起来更像这样:

public function deletePhoto(Request $request, $id) {
    Photo::where('id', $id)->first()->delete();
    return 'Photo Deleted.';
 }

看看这里更好的Laravel HTTP响应:https://laravel.com/docs/5.0/responses

在您的HTML中，您仍然可以使用一个链接，就像您已经有，删除操作，甚至只是一个按钮元素代替。无论哪种方式，其思路都是使用javascript监听被点击的事件，并调用一个函数，该函数将运行http请求，而无需重新加载页面。当使用链接时，你必须编写一些javascript代码来阻止页面重新加载，而使用按钮时，则不需要这样做。根据您的应用程序选择更适合您的。

一个使用按钮的快速html示例是:

<button onclick="myDeletePhotoFunction()">Delete Photo</button>

然后在javascript中，myDeletePhotoFunction将是一个函数，将处理http调用到服务器(AJAX)，使用您的删除照片路由。像这样:

function myDeletePhotoFunction() {
    //run ajax call to /listings/expedition-wild-2/trips/photos/2456/destroy
    //I recommend using a library for this, for ex. jQuery    
    //when completed, show message to user    
    //ex.: alert('photo deleted'); or alert(ajaxResponse);
}

这应该给你指明正确的方向。

阅读更多关于Javascript AJAX在这里:http://www.w3schools.com/ajax/default.asp

使用jQuery: http://www.w3schools.com/jquery/jquery_ajax_intro.asp