How to open modal with specific information in it-CodePudding

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

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

Opening modal:

<a href="" data-bs-toggle="modal" data-bs-target="#infoPonuka">
    <i > </i>
</a>

Modal:

        <div  id="infoPonuka" tabindex="-1" aria-labelledby="infoPonuka" aria-hidden="true">
            <div >
                <div >
                    <div >
                        <h5  id="infoPonuka">Ponuka - info:</h5>
                        <button type="button"  data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    
                    <div >
                    @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 >
                        <button type="button"  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 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?

CodePudding user response：

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.

CodePudding user response：

Make a method in a Controller and a route: This will retun a redered view.

public function getOffer($offer_id)
{
    $offer = Offer::where('id', $offer_id);
    $renderedOfferView = view('modal.offer', ['offer' => $offer)->render();
    return return response()->json(['status' => 'success', 'renderedOfferView' => $renderedOfferView]);
}

In your blade:

<a href="" data-bs-toggle="modal" data-bs-target="#infoPonuka" onclick="getOffer('{{ $ponuka->ID }}')">
    <i > </i>
</a>

<div  id="infoPonuka" tabindex="-1" aria-labelledby="infoPonuka" aria-hidden="true">
    <div >
        <div >
            <div >
                <h5  id="infoPonuka">Ponuka - info:</h5>
                <button type="button"  data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            
            <div  id="getOfferContent">
            <!-- use the getOfferContent id to fill with data -->
            </div>
           
            <div >
                <button type="button"  data-bs-dismiss="modal">Zatvoriť</button>
            </div>
        </div>
    </div>
</div>

getOffer(id){
    $('#getOfferContent').html(''); // clear data
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    $.ajax({
        url: '/your-getOffer-route',
        type: 'GET',
        data: {
            id: id,
        },
        success: function( response ) {
            $('#getOfferContent').html(response.renderedOfferView); // fill data
        },
        error: function( response ) {

        }
    });
}

Do not forgot to set: <meta name="csrf-token" content="{{ csrf_token() }}"> in your layout.blade.php into <head> tag