写真の削除後にモーダルにリダイレクトする方法 - Laravel

Question

私はユーザーが旅行の項目を入力するために使用できるモーダルを持っています。フィールドの1つは、複数の写真のアップロード入力フィールドです。ユーザーが旅行を編集すると、そのモーダル内のその旅行のすべての写真が表示されます。ユーザーはモーダル内で一度に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> 

そして、これは私のdeleteメソッドです：私は写真

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

Answer 1

を削除すると

public function deletePhoto(Request $request, $id) { 

     Photo::where('id', $id)->first()->delete(); 

     return redirect()->back(); 
    } 

これは私の要求のURLですページのリロードを防ぐには、AJAX呼び出しでJavascriptを使用する必要があります。ページがリロードされると（あなたのケースではreturn redirect()->back()）、モーダルがまだ開かれていない元の状態のページが表示されます。

アイデアは、「写真を削除」をクリックすると、サーバールート/listings/expedition-wild-2/trips/photos/2456/destroyにhttp要求が実行され、サーバーは写真を削除して応答を返そうとします。あなたのjavascriptコードは、その応答を受け取って、好きなように扱います。たとえば、「写真が削除されました！」というユーザーにメッセージを表示します。この方法では、ページはリロードされず、モーダルは開いたままになります。

あなたのdeleteメソッドは、より多くのようになります。

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

    return 'Photo Deleted.'; 
} 

は、より良いLaravelのHTTP応答のためにここを見てみましょう：あなたのHTMLで https://laravel.com/docs/5.0/responses

は、あなたはまだあなたがすでに持っているようにリンクを使用することができます、削除アクションのために、あるいは単にボタン要素であってもよい。いずれにせよ、その考え方は、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