<!-- $o=System::class --> <div class="modal fade" id="packet-contents" tabindex="-1"> <div class="modal-dialog modal-lg modal-dialog-scrollable"> <div class="modal-content bg-dark"> <div class="modal-header bg-success"> <h5 class="modal-title text-light">Summary Packet Contents for <span id="packet"></span></h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <i id="spinner" class="spinner-grow spinner-grow-sm d-none"></i> <div id="modal-content"></div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> </div> </div> </div> </div> @section('page-scripts') <script> var packet = new bootstrap.Modal(document.getElementById('packet-contents'), {}); $(document).ready(function() { $('.packet').click(function(e) { var item = this; var icon = $('#spinner'); $('span#packet').html(e.target.innerText); packet.show(); $.ajax({ type: 'POST', data: {packet: e.target.innerText,_token: '{{csrf_token()}}'}, beforeSend: function() { icon.toggleClass('d-none'); $('#packet-contents').find('div#modal-content').empty(); }, success: function(data) { icon.toggleClass('d-none'); $('#packet-contents').find('div#modal-content').html(data); }, error: function(e) { icon.toggleClass('d-none'); alert('That didnt work? Please try again....'); }, url: '{{ url('packet/contents',['o'=>$o->id]) }}/'+e.target.innerText, cache: false }) return false; }); }); </script> @append