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

我想打开一个关于从数据库中抓取的报价信息的模态。

这是我目前所做的:(最少所需代码)

开模态:

<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 }}"来使每个按钮都是唯一的。但我做不到。有人知道吗?

你可以在点击你的锚标记时使用ajax请求，而不是使用这些属性data-bs-toggle="modal" data-bs-target="#infoPonuka"，然后，在你的ajax请求的响应中，将modal的html中的数据设置为将ajax响应数据传递给modal然后将模态显示为:

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

在你的数据被设置为modal html的行之后。

在控制器和路由中创建一个方法:这将返回一个重新绘制的视图。

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

在你的刀片:

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

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

相关内容

最新更新

热门标签：