Search code examples
phplaravelbootstrap-modal

How to open modal with specific information in it


I want to open a modal with information about the offer that is grabbed from the database.

Here's what I have so far: (Minimal required code)


Opening modal:

<a href="" data-bs-toggle="modal" data-bs-target="#infoPonuka">
    <i class="fa-solid fa-eye spc"> </i>
</a>

Modal:

<div class="modal fade" id="infoPonuka" tabindex="-1" aria-labelledby="infoPonuka" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="infoPonuka">Ponuka - info:</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            
            <div class="modal-body">
            @if(isset($_GET['id']))
                @foreach ($ponuky AS $item)
                    @if($item->ID == $_GET['id'])
                        @php
                            $ponuka = $item;
                        @endphp
                        {{Debug::printr($ponuka, false);}}
                    @endif
                @endforeach
            @endif
            </div>
            
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Zatvoriť</button>
            </div>
        </div>
    </div>
</div>

When I was doing it, I thought I could maybe just use $_GET to get the ID of the offer, so I can have specific data from an array because every opening modal (the first code block) is shown on every item, so I wanted to make it unique for every button by maybe adding the href="?id={{ $ponuka->ID }}". But I was unable to do so. Does someone have any idea?


Solution

  • You might use ajax request on click of your anchor tag instead of using these attributes data-bs-toggle="modal" data-bs-target="#infoPonuka", and then, in response of your ajax request, set the data in the html of the modal as Passing ajax response data to modal and then show the modal as:

    $("#modalId").modal("show");
    

    right after the line your data is set to modal html.