laravel 不能使数据的id在每一行去的形式,看看其余的数据库

nukf8bse  于 2023-11-20  发布在  其他
关注(0)|答案(1)|浏览(99)

**Title:**在Laravel中单击按钮时显示特定ID的表单数据
问题:

我正在做一个Laravel项目,我试图让一个按钮打开一个表单,其中包含特定于被点击项目的数据。我有一个显示捐赠者信息的表,每行都有一个“详细信息”按钮。当点击这个按钮时,我想打开一个显示相应捐赠者详细信息的表单。
以下是我目前掌握的信息:
在我的DonorController中,我有一个index方法,它检索所有捐赠者并将它们传递给视图,我使用一个路由来访问这个方法。

public function index($donorId = null)
{
    $donors = Donor::all();
    return view('CEST.Home.Home', compact('donors', 'donorId'));
}

字符串
在我看来,我在一个表中显示捐赠者,并在单击“Details”按钮时使用JavaScript打开模态。

@foreach($donors as $donor)
    <tr>
        <td>{{ $donor->id }}</td>
        <td>{{ $donor->donor_name }}</td>
        <td>{{ $donor->address }}</td>
        <td>{{ $donor->donor_request_date }}</td>
        <td>
            <button class="custom-button" onclick="openModal('{{ $donor->id }}'); this.classList.toggle('clicked')">Details</button>
        </td>
    </tr>
@endforeach


在我的JavaScript中,我试图用正确的捐赠者的详细信息打开模态。

function openModal(donorId) {
    const modal = document.getElementById('myModal');
    const modalIframe = document.getElementById('modal-iframe');
    const routeUrl = `/home-form/${donorId}`;
    modalIframe.src = routeUrl;
    modal.style.display = 'block';
    void modal.offsetWidth;
    modal.style.opacity = '1';
    modal.querySelector('.modal-content').style.transform = 'translate(-50%, -50%) scale(1)';
}


但是,我很难将按钮链接到具有相同捐赠者数据的表单。我如何修改代码来实现这一点?我是否需要创建一个新的控制器方法和路由来显示具有特定捐赠者数据的表单?
任何关于在Laravel中实现此功能的最佳实践的指导都将不胜感激。谢谢!

rslzwgfq

rslzwgfq1#

如果我没理解错的话,你是想在用户点击Details按钮的时候在弹出窗口中显示每个捐赠者的数据。你有两个选择,第一个是在index方法中预先获取所有这些数据,然后在用户点击Details按钮的时候直接显示它们。第二个是在用户每次点击Details按钮的时候发送一个请求来显示API。我推荐第二个选择,并将提供它的代码:routes/web.php:

Route::get('/donors', 'DonorController@index')->name('donors.index');
Route::get('/donor/{id}', 'DonorController@show')->name('donor.show');

字符串
捐助者控制人:

public function index()
{
    $donors = Donor::all();
    return view('CEST.Home.Home', compact('donors'));
}

public function show($id)
{
    $donor = Donor::findOrFail($id);
    return view('CEST.Home.DonorDetails', compact('donor'));
}


将空模式添加到视图中,以便通过JS进行更新:

<div id="myModal" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <div id="donorDetails"></div>
    </div>
</div>


然后更新你的JavaScript:

$(document).ready(function() {
    $(".custom-button").on('click', function() {
        const donorId = $(this).data('donor-id');
        fetchDonorDetails(donorId);
    });
    
    $(".close").on('click', function() {
        $("#myModal").hide();
    });
});

function fetchDonorDetails(donorId) {
    $.get(`/donor/${donorId}`, function(data) {
        $("#donorDetails").html(data);
        $("#myModal").show();
    });
}


详细信息按钮:

<button class="custom-button" data-donor-id="{{ $donor->id }}">Details</button>


这些是处理你想要的东西的简单代码。2你可以为你的项目改进和修改它。

相关问题