Dynamically load a bootstrap modal body

Question

I am looking to load a modal with data before showing it.

<button data-dismiss="modal" data-target="#myModalTEST" href="#myModal3" class="btn btn-primary" id="1">View Database Details</button>

when that button is clicked, I populate a listbox and open up another modal to show the data but it always comes up empty.

Here is the first part modal div that i want to reload (specifically the modal body form field):

<div class="modal" id="myModal3" data-backdrop="static">
  <div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
      <h4 class="modal-title">Second Modal title</h4>
    </div><div class="container"></div>
    <div class="modal-body">
      Schemas available:<br>
      {{form.instance_schema_list(size =5)}}

and here is what im trying:

  $("a[data-target=#myModalTEST]").click(function(ev) {
  ev.preventDefault();
  var target = $(this).attr("href");

  // load the url and show modal on success
  $("#myModal3 .modal-body").load(target, function() {
  $("#myModal3").modal("show");
  });
  });

any help would be greatly appreciated!

Answer 1

You are trying to just tell it to put the URL not the content of that URL into the modal. You need to get the html of the link URL, and then put it in the modal during that click event handler.

If you need to load data from a URL, you could do the following:

$.get(url, function( data ) {
   $( "your modal body" ).html( data );     
 });

Then call teh rest of the modal function to display it. Unless I am misunderstanding what you are trying to do.