Question

在Laravel 5应用程序中，我使用模型添加项目。在我的视图文件中，我按照以下方式执行此操作

<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.更新操作网址。示例：'update / product / 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。

Laravel：如何将id传递给模态框进行编辑

1 个答案: