CODEWITHSUNDEEP
phphtmllaravel-5.6laravel-blade
Mena
Mena

Reputation: 2029

Calling Modal When a Button is Clicked

In a table the name, comment and an edit button for each item returned from my items collection is displayed. When clicking the edit button is, a modal with a form for updating the item should be called.

Issue

If there is more than one item returned from the collection, only the last item's edit button calls the modal but the edit button for others does nothing. I need help in fixing my code so that the edit button will always call the modal no matter how many items are in the collection.

Items Table List

<div class="col-12 table-responsive">
<table class="table table-striped">
    <tbody>
        @foreach ($items as $item)
            <tr class="text-muted">
                <td class="text-capitalize">{{ $item->name }}</td>
                <td>{{ $item->comment }}</td>
                <td>
                    <button type="button" class="btn-custom-one" data-toggle="modal" data-target="#editItem{{$item->id}}"><i class="fas fa-edit"></i>&nbsp; Edit</button>&nbsp;
                </td>
            </tr>
        @endforeach
    </tbody>
</table>
</div>

Modal

<div class="modal fade" id="editItem{{$item->id}}" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-body">
            <form action="/home/items/{{$item->id}}/update" method="POST">
                @method('PUT')
                @csrf
                <div class="form-group">
                    <label for="Name">Name</label>
                    <input type="text" name="name" value="{{$item->name}}" class="form-control">
                </div>

                <div class="form-group">
                    <label for="comment">Comment</label>
                    <textarea name="comment" class="form-control" cols="30" rows="5">{{$item->comment}}</textarea>
                </div>

                <button type="submit" class="btn btn-custom-two">Save</button>
            </form>
        </div>
    </div>
</div>
</div>

Upvotes: 0

Views: 116

Answers (1)

Atik Hashmee
Atik Hashmee

Reputation: 393

a little minor change in your code. think something like this. you have to call the modal inside the loop. now you can do it by defining this modal in a function or by doing hard coding. I think this will help

<div class="col-12 table-responsive">
<table class="table table-striped">
    <tbody>
        @foreach ($items as $item)
            <tr class="text-muted">
                <td class="text-capitalize">{{ $item->name }}</td>
                <td>{{ $item->comment }}</td>
                <td>
                    <button type="button" class="btn-custom-one" data-toggle="modal" data-target="#editItem{{$item->id}}"><i class="fas fa-edit"></i>&nbsp; Edit</button>&nbsp;
<div class="modal fade" id="editItem{{$item->id}}" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-body">
            <form action="/home/items/{{$item->id}}/update" method="POST">
                @method('PUT')
                @csrf
                <div class="form-group">
                    <label for="Name">Name</label>
                    <input type="text" name="name" value="{{$item->name}}" class="form-control">
                </div>

                <div class="form-group">
                    <label for="comment">Comment</label>
                    <textarea name="comment" class="form-control" cols="30" rows="5">{{$item->comment}}</textarea>
                </div>

                <button type="submit" class="btn btn-custom-two">Save</button>
            </form>
        </div>
    </div>
</div>
</div>
                </td>
            </tr>
        @endforeach
    </tbody>
</table>
</div>

Upvotes: 1

Related Questions