Laravel:如何将 id 传递到模式框进行编辑

Question

在 Laravel 5 应用程序中，我使用模型来添加项目。在我的 View 文件中，我的做法如下

<a href="#" data-toggle="modal" data-target="#add-item-modal" type="button" class="btn btn-sm btn-primary btn-create">Create new item</a>

<div class="modal fade" id="add-item-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
      <div class="loginmodal-container">
        .... <form comes here>
      </div>
    </div>
</div>

如上所述，这适用于添加项目。

我现在也想使用类似的逻辑来编辑项目。所以我在我的页面上添加了以下内容

<a href="#" data-toggle="modal" data-target="#edit-auction-modal" type="button" class="btn btn-sm btn-primary btn-warning"><em class="fa fa-pencil"></em></a>

<div class="modal fade" id="add-item-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
      <div class="loginmodal-container">
        .... <form comes here>
      </div>
    </div>
</div>

但是问题是我需要将当前项目(我希望编辑)的 id 传递到模式框，以便模式可以显示我希望更新的项目的值。

如何做到这一点？

Answer 1

我过去也多次遇到过这个问题。我所做的(而且它总是有效)是将您想要更新的项目 ID 作为数据属性传递到打开模式的链接，如下所示:

<a href="#" data-toggle="modal" data-target="#edit-auction-modal" type="button" class="btn btn-sm btn-primary btn-warning" data-item-id="10">Open modal</a>

然后，创建一个 js 函数，当从 data-item-id 属性显示模态时获取项目 id，并根据您的情况更新表单数据。我可以想象两种方式:1. 更新操作 URL。示例:“更新/产品/10”2. 使用项目 ID 更新隐藏字段。

示例 js:

$(document).ready(function () {
  var $updateModal = $('#update-modal');
    $('.list-item-update').on('click', function (evn) { // this is the "a" tag
    evn.preventDefault();

    $updateModal.modal('show');
    var resourceId = $(this).data('itemId'),
        $pressedButton = $(this);

    $updateModal.find('.confirm-btn').on('click', function (e) {
        e.preventDefault();
        var submitUrl = '/update/product/' + resourceId,
            form = $('#product-update-form'); // change with your form

        form.attr('action', submitUrl);
        form.submit();
    });
  });
});

几乎所有事情都归结为根据您提供的数据属性使用 js 修改 DOM。