我的 html table 中的模态不工作或无法打开，只有第一个模态在工作

Question

在我的 html table 中只能打开第一个模态框，有没有办法解决这个问题？我正在使用 javascript 打开模式而不是使用按钮使用目标。我想为 table 中的每个选定行打开模式。先谢谢你了。

Modal

这是我的htmltable代码

     <div class="row">
      <div class="col-12">
      <table class="table table-bordered" id="">
      <thead>
      <tr>
      <th>Id</th>
      <th>Name</th>
      <th>Email</th>
      <td colspan="2">Action</td>
      </tr>
      </thead>
      <tbody id="users-crud">
      @foreach($merchants as $merchant)
      <tr id="user_id_{{ $merchant->id }}">
      <td>{{ $merchant->id  }}</td>
      <td>{{ $merchant->first_name }}</td>
      <td>{{ $merchant->email }}</td>
      <td><a href="javascript:void(0)" id="getData" data-id="{{ $merchant->id }}" class="btn 
      btn-info">Show</a></td>
      </tr>
      @endforeach
      </tbody>
      </table>
      {{ $merchants->links() }}
      </div> 
    </div>

那么这是我的模态代码

 <div class="modal fade" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">

        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Modal Heading</h4>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>

        <!-- Modal body -->
        <div class="modal-body">

          {{-- i want to output here the return value from query --}}
                    <p id="id"></p>
                    <p id="first_name"></p>
        </div>

        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
        </div>

      </div>
    </div>
    </div>

这是我的脚本

<script type=text/javascript>
$(document).ready(function() {
$("#getData").click(function() { 

$('#myModal').modal('show');
$.ajax({  //create an ajax request to display.php
type: "GET",
url: "getproducts/",  
// dataType: 'json',
// data: {id: 3} // This will be {id: "1234"}     
success: function (data) {
$("#id").html(data.id);
$("#first_name").html(data.first_name);
}
});

});
});

</script>

Answer 1

里面table

<td><a id="getData" onClick="getData({{$merchant->id}})" 
  class="btn btn-info">Show</a></td>

确保在 getData() 中我们有正确格式的 int 或 string 的正确数据。

保持模态不变，否则您可以根据需要进行更改。

在脚本中

  <script type=text/javascript>
  $(document).ready(function() {
   });

   function getData(id){
  $('#myModal').modal('show');
      $.ajax({  //create an ajax request to display.php
      type: "GET",
   url: "{{route('nameOfYourRoute)}}",  
   // dataType: 'json',
    data: {id: id}, // This will be {id: "1234"}     
    success: function (data) {
   $("#id").html(data.id);
   $("#first_name").text(data.first_name);
   }
   });

  };

</script>

调试检查错误消息，post调试也很容易解决您的问题。

我的 html table 中的模态不工作或无法打开，只有第一个模态在工作

Modal inside my html table not working or can't be open, only the first is modal is working

javascript

php

modal-dialog

laravel

bootstrap-4