将 id 从 foreach 传递到 jquery modal答案

【问题标题】：Passing an id from foreach to jquery modal将 id 从 foreach 传递到 jquery modal
【发布时间】：2020-12-17 18:27:40
【问题描述】：

我希望当用户单击创建资产按钮时打开模态，并且在填写模态字段并单击保存按钮后，还从 foreach 接收具有模态数据的资产组 ID 并通过 Ajax 请求发送.

这怎么可能？

foreach:

@foreach ($AssetsGroup as $AssetGroup)
<tr id="assetgroup{{$AssetGroup->id}}" class="active">
    <td>{{$AssetGroup->name}}</td>
    <td></td>
    <td></td>
    <td width="auto">
        // if click this button then modal show
        <button id="btn_add" name="btn_add" value="{{ $AssetGroup->id }}" data-toggle="modal" and data-target="#assetModal">create assets</button>
    </td>
</tr>
@endforeach

Jquery 模式：

<div class="modal fade" id="assetModal" tabindex="-1" role="dialog" aria-labelledby="assetModalLabel" aria-hidden="true">
  <div class="modal-dialog">
      <div class="modal-content">
          <div class="modal-body">
              <form id="frmassets" name="frmassets" class="form-horizontal" novalidate="">
                  <div class="form-group row">
                      <label for="name">asset name</label>
                      <input type="text" id="name2" name="name2">
                  </div>

                  <div class="form-group row">
                      <label for="name">tags</label>
                      <input id="tags2" name="tags2" type="text"/>
                  </div>
              </form>
          </div>
          <div class="modal-footer">
              <button type="button" id="btn-save" value="add">save</button>
              <input type="hidden" id="asset_id" name="asset_id" value="0">
          </div>
      </div>
  </div>
</div>

Ajax：

$("#btn-save").click(function (e) {
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    })

    e.preventDefault();
    var formData = {
        name: $('#name2').val(),
        group:  i want to resive group id from foreach and send group id with ajax request
        tags: $('#tags2').val(),
    }

    //used to determine the http verb to use [add=POST], [update=PUT]
    var state = $('#btn-save').val();
    var type = "POST"; //for creating new resource
    var asset_id = $('#asset_id').val();
    var my_url = '/assets';
    if (state == "update"){
        type = "PUT"; //for updating existing resource
        my_url += '/' + asset_id;
    }
    console.log(formData);
    $.ajax({
        type: type,
        url: my_url,
        data: formData,
        dataType: 'json',
        success: function (data) {
            ...
        },
        error: function (data) {
            console.log('Error:', data);
        }
    });
});

【问题讨论】：

标签： php jquery ajax laravel

【解决方案1】：

您可以使用数据属性来实现这一点-

刀片文件代码-

 @foreach ($AssetsGroup as $AssetGroup)
    <tr id="assetgroup{{$AssetGroup->id}}" class="active">
    <td>{{$AssetGroup->name}}</td>
    <td></td>
    <td></td>
    <td width="auto">
      <button id="btn_add" name="btn_add" data-asset-id="{{ $AssetGroup->id }}">create assets</button>
    </td>
    </tr>
 @endforeach

Js代码-

$('#btn_add').click(function() {
  $('#assest_id').val($(this).data('asset-id'));
  $('#assetModal').modal('show');
});

现在，当您发送 ajax 请求时，您可以获得 asset_id 字段值。

【讨论】：