Skip to content
Advertisement

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

Only first modal can be open inside my html table is there a way to fix it? I’m using javascript to open modal instead of using target using a button. I want to open modal for every selected row in my table. Thank you in advanced.

Modal

This is my html table code

     <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>

Then this is my modal code

 <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>

and this is my script

<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>

Advertisement

Answer

Inside table

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

make sure inside getData() we have correct data in proper format int or string.

Keep the modal as its or you may change if required.

In the script

  <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>

to debug check error message and post that too so it will be easy to solve your problem.

User contributions licensed under: CC BY-SA
9 People found this is helpful
Advertisement