如何在照片刪除後重定向到模式 - Laravel

Question

我有一個模式，用戶可以使用它來輸入旅行字段。其中一個字段是多張照片上傳輸入字段。因此，當用戶編輯旅行時，所有照片都顯示出該模式內的旅行。用戶可以在模態內一次刪除1張照片。

問題是，當我按下該按鈕刪除照片時，它將我重定向回該頁面，但模式消失。這種煩人的，特別是如果你想刪除另一張照片或其他東西。

什麼是正確的方式來保持該模式在重定向後關閉。

這裏是我的模態（縮短）：

<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 

Answer 1

您應該在AJAX調用中使用Javascript來防止頁面重新加載。當頁面重新加載時（在你的情況下爲return redirect()->back()），它將使頁面處於原始狀態，其中模式尚未打開。

這個想法是，與JavaScript，當你點擊「刪除照片」，它會運行一個http請求到您的服務器路線/listings/expedition-wild-2/trips/photos/2456/destroy，其中服務器將嘗試刪除照片併發送回應。然後，您的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將是將處理一個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); 
} 

這應該指向你在正確的方向。

瞭解更多關於AJAX的Javascript這裏：http://www.w3schools.com/ajax/default.asp

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