动态加载自举模态主体

Question

我希望在显示数据之前加载模态。

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

单击该按钮时，我将填充一个列表框，并打开另一个模式以显示数据，但它总是空白。

这是我要重新加载的第一部分模态div（特别是模态主体表单字段）：

<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)}}

这是我正在尝试的：

  $("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");
  });
  });

任何帮助将不胜感激！

Answer 1

您试图告诉它将URL而不是该URL的内容放入模式中。 您需要获取链接URL的html，然后在该click事件处理程序中将其放在模式中。

如果您需要从URL加载数据，则可以执行以下操作：

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

然后调用模态函数的其余部分以显示它。 除非我误解了您要做什么。