Question

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

问题是，当我点击该按钮删除照片时，它会将我重定向回该页面，但模态会消失。而这很烦人，特别是如果你想删除另一张照片或其他东西。

在重定向后保持模态不会关闭的正确方法是什么。

这是我的模态（缩短）：

num

这是我的删除方法：

<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();
    }

Answer 1

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

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

您的删除方法看起来更像是这样：

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将是一个函数，它将使用您的删除照片路径处理对服务器（AJAX）的http调用。像这样：

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

如何在删除照片后重定向到模态 - Laravel

1 个答案: