javascript - Dynamically load a bootstrap modal body -

i looking load modal data before showing it.

<button data-dismiss="modal" data-target="#mymodaltest" href="#mymodal3" class="btn btn-primary" id="1">view database details</button>

when button clicked, populate listbox , open modal show data comes empty.

here first part modal div want reload (specifically 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 im trying:

  $("a[data-target=#mymodaltest]").click(function(ev) {   ev.preventdefault();   var target = $(this).attr("href");    // load url , show modal on success   $("#mymodal3 .modal-body").load(target, function() {   $("#mymodal3").modal("show");   });   }); 

any appreciated!

you trying tell put url not content of url modal. need html of link url, , put in modal during click event handler.

if need load data url, following:

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

then call teh rest of modal function display it. unless misunderstanding trying do.