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