1

The following code successfully dynamically loads the "remote" page (data-remote="/booking-app-1") within the modal-body. However, this target page just contains a < script > which loads an IFrame (for an external payment application). This script does not execute. Is there a way to fix this, or a better way to just inject the booking applications's script via its URL directly into the modal-body? I've also tried swapping the data-remote URL to my page with the URL direct to the booking app's script but this did not work.

<button type="button" class="btn" data-toggle="modal" data-target="#bookingApp-1" data-remote="/booking-app-1" >
 BUY THING 1
</button>


<!-- Modal -->
<div class="modal fade" id="bookingApp-1" tabindex="-1" role="dialog" aria-labelledby="bookingApp-1" aria-hidden="true">
  <div class="modal-dialog" role="document">
      <div class="modal-body">
         (CONTENT LOADS HERE)
      </div>
  </div>
</div>



<script> // I will have multiple modals with different scripts on the page
$('body').on('click.modal.data-api',
      '[data-toggle="modal"]', function(){ 
         $($(this).data("target")+' .modal-body').load($(this).data('remote')); });
</script>

/booking-app.php:

<script type="text/javascript" src="https://bookeo.com/widget.js?a=12345&amp;type=1234_not_the_actual_url"></script>
  • Doesn’t execute...is that because widget.js is expecting window.onload to fire? Have a look at [this answer](https://stackoverflow.com/a/10976146/535480), you might have to manually trigger onload in the .load callback. – James Feb 15 '18 at 17:44
  • Hi, I have pretty much the same problem: https://stackoverflow.com/questions/48831990/why-is-javascript-code-not-loaded-when-injectet-into-bootstrap-4-modal – Tarator Feb 16 '18 at 17:36
  • Hi, you might be interested in this answer. Maybe this also works for you: https://stackoverflow.com/a/48833430/1219104 – Tarator Feb 16 '18 at 19:17

0 Answers0