CODEWITHSUNDEEP
phphtmllaravellaravel-5
The Dead Man
The Dead Man

Reputation: 5566

How to display tags on pop up? laravel

I have a simple page table in which I am displaying page list, visual looks like this.

enter image description here

Expected result :

Now I want when a user clicks view tags it should display the tags related to that page

eg if a user clicks view tag on row one with ID 6 it should display tag tes1 in a pop up modal if a user clicks view tag on row one with ID 7 it should display a tag named test2 in a pop up modal

Problem:

Now when user clicks a button view tags in either row I get the following result

enter image description here

Here is how I display tags in a pop up when user clicks view tags button

<button type="button" class="btn btn-sm btn-success" data-toggle="modal" data-target="#exampleModal">
    {{ __('view tags') }}
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Tag List</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <table class="table">
                    <thead class=" text-primary">
                        <th>
                            ID
                        </th>
                        <th>
                            name
                        </th>
                    </thead>
                    <tbody>
                        @foreach ($page->tags as $tag)
                        <tr>
                            <td>
                                {{ $tag->tag->id }}
                            </td>
                            <td>
                                {{ $tag->tag->name }}
                            </td>
                        </tr>
                        @endforeach

                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

Here is my repository : my demo repository

Upvotes: 0

Views: 1171

Answers (3)

slicky
slicky

Reputation: 26

Are you creating your modal and button code in foreach loop?

If so - I'm not saying it is the perfect solution, but it works. What I think may be the problem is that your model opening button property data-target is the exact same for every single one. Also the modal id is the same for every single row.

So everytime you click open modal button, it opens up the first modal, which is the one in your picture.

What I would suggest doing is either making 1 modal, which contents are being changed with JavaScript when button is clicked.

If you don't wanna use JavaScript, you should add unique values to your modal id and button data-target. Here is example for button:

<button type="button" class="btn btn-sm btn-success" data-toggle="modal" data-target="#exampleModal{{$page->id}}">
{{ __('view tags') }}

</button>

Example for modals first row:

<div class="modal fade" id="exampleModal{{$page->id}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

Upvotes: 1

albus_severus
albus_severus

Reputation: 3702

Pass Your Page Id into your modal

<button type="button" class="btn btn-sm btn-success" data-toggle="modal" data-target="#exampleModal{{$page->id}}">
    {{ __('view tags') }}
</button>

<div class="modal fade" id="exampleModal{{$page->id}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Tag List</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <table class="table">
                    <thead class=" text-primary">
                        <th>
                            ID
                        </th>
                        <th>
                            name
                        </th>
                    </thead>
                    <tbody>
                        @foreach ($page->tags as $tag)
                        <tr>
                            <td>
                                {{ $tag->tag->id }}
                            </td>
                            <td>
                                {{ $tag->tag->name }}
                            </td>
                        </tr>
                        @endforeach

                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

Upvotes: 1

Pramod
Pramod

Reputation: 716

Problem with your code is it always shows first modal.

Here is the solution:- 

 <button type="button" class="btn btn-sm btn-success" data-toggle="modal" data-target="#exampleModal-{{ PageID }}">
        {{ __('view tags') }}
    </button>

    <!-- Modal -->
@foreach ($pages as $page)
    <div class="modal fade" id="exampleModal-{{ $page->ID }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Tag List</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <table class="table">
                        <thead class=" text-primary">
                            <th>
                                ID
                            </th>
                            <th>
                                name
                            </th>
                        </thead>
                        <tbody>
                            @foreach ($page->tags as $tag)
                            <tr>
                                <td>
                                    {{ $tag->tag->id }}
                                </td>
                                <td>
                                    {{ $tag->tag->name }}
                                </td>
                            </tr>
                            @endforeach

                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
@endforeach

Another solution

Clicking on View tag button call ajax and update data in modal.

Upvotes: 1

Related Questions