0

I have a question regarding jquery and modal in my laravel project (here it's a blade file). I have a table of several artist, each row reference an artist. There is also a column delete. For each row of artist, when I click on delete, the modal appears asking if i am sure to cancel etc... I am able to delete the first artist but if I select another one, it doesn't work. I think I have to take the id of the artist but I don't know how, someone can help ? Thanks

<div class="col-md-8">
    <table class="table table-bordered table-striped table-condensed css-serial">
        <div class="btn pull-right col-md-4">
            <a class="btn btn-primary" href="{{ route('create-artist') }}" role="button">Create a new Artist or Band</a>
        </div>
        <thead>
        @if(!$artists->isEmpty())
            <h1>ARTISTS & BANDS:</h1>
            <tr>
                <th>#</th>
                <th>Artist</th>
                <th>Music genre</th>
                <th>Picture</th>
                <th>Edition</th>
                <th>Delete</th>
            </tr>
        </thead>
        <tbody>
        @foreach ($artists as $artist)
            <form>
                <tr>
                    <td></td>
                    <td>{{ $artist->artist_name}}</td>
                    <td>{{ $musicgenres[$artist->music_genre]}} </td>
                    <td><img src="../images/uploads/pictures_band/{{$artist->picture}}" style="width:80px; height:80px; border-radius:50%;" ></td>
                    <td><a href="{{ route('edit-artists', ['id' => $artist->id]) }}" class="btn btn-success" id="bt">Show</a></td>
                    <td><a class="btn btn-danger" id="delete_id">Remove</a></td>
                </tr>
            </form>
            <div id="delete-confirm" class="modal"  data-backdrop="static" data-keyboard="true">
                <div class="vertical-alignment-helper">
                    <div class="modal-dialog vertical-align-center">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h4 class="modal-title  text-center">Warning</h4>
                            </div>
                            <div class="modal-body">
                                <p class="text-center">Are you sure you want to delete this Artist ? It will delete Tour and concert belong to this artist !</p>
                                <form action="{{ route('delete-artists', ['id' => $artist->id] )}}">
                                    <div class="text-center" >
                                        <button type="submit" class=" btn btn-primary "  > Okay</button>
                                        <button type="button" class=" btn btn-primary " data-dismiss="modal" > Cancel</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
        @else
            <h3>'There is no artist or band yet !'</h3>
        @endif
        </tbody>
    </table>
</div>

<script>
    $('#delete_id').on('click',function(){
        //var id = $(this).attr('id')
        $('#delete-confirm').modal('show');
    });
</script>
1
  • use class and use this context.
    – guradio
    Jun 13, 2018 at 23:23

1 Answer 1

0

your remove button has an id, but the problem is that (most likely) you will have many buttons. id should have to one specific element. In my previous experience it broke some things (about modals), so i suggest you to change it into a class. after that in you have to modify your js to show the correct modal which is connected to your artist's button.

1
  • I removed the id in button and in Js I put $('.btn'). Perfect, Thanks!!
    – bruno
    Jun 14, 2018 at 1:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.