Nicks

Solved

I am using Laravel as backend and bootstrap as frontend I am using transaction ID from orders in table. Now if user clicks on that transaction ID, then I want to display the order on Bootstrap Modal... Here is code of Frontend : <table id="example" class="table table-striped table-bordered " cellspacing="0" width="100%"> <thead> <tr class="bg-info"> <th><center>Transaction ID </center></th> <th><center>Shop Name </center></th> <th><center>Sales Man </center></th> <th><center>Processed ? </center></th> </tr> </thead> <tbody align="center"> @foreach ($ordersList as $order) <tr id = "tr_{{$order->id}}"> <a> <td id="{{ $order->transaction_Id }}" data-toggle="modal" data-target="#modal{{$order->transaction_Id}}" style="cursor:pointer;color:blue" onclick="getCollapseData(id)"><u> {{ $order->transaction_Id }} </u></td> <td>{{ $order->Shop }}</td> <td>{{ $order->Sales }}</td> <td> <input id="chk_{{ $order->id }}" type="checkbox" name="is_Processed" onclick="orderProceesed(id)"><br> </td> </a> </tr> <!-- Modal --> <div class="modal fade" id="modal{{$order->transaction_Id}}" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Modal Header</h4> </div> </div> </div> </div> @endforeach </tbody> </table> here is code of JavaScript Function : function getCollapseData(data) { //alert(data); $.ajax({ method : "GET", url: "orders.getCollapseData", data: {id: data}, success : function(response) { //alert(response); //$("#collapse"+data).empty(); //debugger; document.getElementById("modal"+data).innerHTML = ""; var receivedData = response; var html = ''; //alert("modal"+data); html += '<div class="modal fade" id="modal'+ data +'" role="dialog">'; html += '<div class="modal-dialog">'; //<!-- Modal content--> html += '<div class="modal-content">'; html += '<div class="modal-header">'; html += '<button type="button" class="close" data-dismiss="modal">&times;</button>'; html += '<h4 class="modal-title">'+ data +'</h4></div>'; html += '<div class="modal-body">'; html += '<table class="table table-striped table-bordered " cellspacing="0" width="100%">'; html += '<thead>'; html += '<tr class="bg-info">'; html += '<th><center> Product Name </center></th>'; html += '<th><center> Quantity </center></th>'; html += '</tr></thead>'; html += '<tbody align="center"><tr>'; for(i=0;i<response.length;i++) { html += '<td>' + receivedData.Product + '</td>'; html += '<td>' + receivedData.qty + '</td>'; } html += '</tr></tbody></table></div>'; html += '</div></div></div>'; document.getElementById("modal"+data).innerHTML = html; } }); } I am missing something and modal is not getting displayed