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

Question

I have a modal that Users can use to input Trips fields. One of the fields is a Multiple Photo upload input field. So when a user edits a trip, all the photos show up for that trip inside that modal. Users can them delete 1 photo at a time inside the modal.

The problem is when I hit that button to delete the photo, it redirects me back to that page, but the modal goes away. And thats kind off annoying, especially if you want to delete another photo or something.

What would be the correct way to keep that modal from closing after a redirect.

Here is my modal (Shortened):

<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>

And this is my delete method:

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

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

        return redirect()->back();
    }

This is my request URL when I delete a photo

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

Answer 1

You should use Javascript with AJAX calls to prevent page reload. When the page reload (in your case with return redirect()->back()), it will bring the page with its original state, where the modal is not opened yet.

The idea is, with javascript, when you click "delete photo", it will run a http request to your server route /listings/expedition-wild-2/trips/photos/2456/destroy, where the server will try to delete the photo and send a response back. Your javascript code will then receive that response and handle it however you like. For example, show a message to the user "photo deleted!". This way, the page will never reload and your modal will stay opened.

Your delete method will look more like this:

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

    return 'Photo Deleted.';
 }

Take a look here for better Laravel HTTP responses: https://laravel.com/docs/5.0/responses

In your HTML, you could still use a link like you already have, for the delete action, or even just a button element instead. Either way, the idea is to listen to the clicked event, using javascript, and call a function that will run the http request without reloading the page. When using links though, you must code some javascript to stop the page reload, where with a button, there is no need for that. Choose what works better for you depending on your application.

A quick html example using a button would be:

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

Then in javascript, myDeletePhotoFunction will be a function that will process an http call to the server (AJAX), using your delete photo route. Something like this:

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

This should point you in the right direction.

Read more about Javascript AJAX here: http://www.w3schools.com/ajax/default.asp

Using jQuery: http://www.w3schools.com/jquery/jquery_ajax_intro.asp