如何打开其中包含特定信息的模态

Question

我想打开一个模式，其中包含从数据库中获取的优惠信息。

这是我目前所拥有的：（所需代码最少）

打开模式：

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

模态：

<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>

当我这样做的时候，我想我可以只使用 $_GET 来获取报价的 ID，这样我就可以从数组中获取特定数据，因为每个打开模式（第一个代码块）显示在每个项目上，所以我想通过添加 href="?id={{ $ponuka->ID }}" 使其对于每个按钮都是唯一的。但是我做不到。有人知道吗？

Answer 1

您可以在单击锚标记时使用 ajax 请求而不是使用这些属性 data-bs-toggle="modal" data-bs-target="#infoPonuka"，然后，为了响应您的 ajax 请求，将数据设置在html 模态为 Passing ajax response data to modal 然后将模态显示为：

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

在您的数据设置为模态的行之后 html。

Answer 2

在控制器和路由中创建一个方法：这将返回渲染视图。

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]);
}

在你的blade中：

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

<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" id="getOfferContent">
            <!-- use the getOfferContent id to fill with data -->
            </div>
           
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" 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 ) {

        }
    });
}

不要忘记设置：<meta name="csrf-token" content="{{ csrf_token() }}"> 在你的 layout.blade.php 到 <head> 标签中

如何打开其中包含特定信息的模态

How to open modal with specific information in it

php

laravel

bootstrap-modal