Bootstrap Modal is giving error with Javascript

[Nicks]

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

[Nicks]

Solved

[Kurumi]

Hi! Just an update - if you have a modal that is showing behind the Results Page, you can use this code in the Header:

<style>

.modal {
 z-index: 9999 !important;
}

</style>

In addition, if you would like to automatically adjust the size of the modal based on its content. You can use this code in the Header as well:

<style>

body .modal-dialog { /* Width */
max-width: 50%;
width: auto !important;
}

</style>

 

[Kurumi]

Hello - In addition to the previous post, if you have a modal and Form Elements that are not showing such as AutoComplete, Dropdowns, and Date Pickers, you can use a custom CSS to show these elements in front of the modal.

Insert this code in the Header of the DataPage.

<style>

.modal-backdrop{
z-index:4 !important;
}
.modal {
z-index: 5 !important;
}
.header-navbar{
z-index: 3 !important;
}

</style>