动态加载引导模态体答案

【问题标题】：Dynamically load a bootstrap modal body动态加载引导模态体
【发布时间】：2015-03-20 19:46:16
【问题描述】：

我希望在显示之前加载带有数据的模式。

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

任何帮助将不胜感激！

【问题讨论】：

标签： javascript jquery html ajax flask

【解决方案1】：

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

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

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

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

【讨论】：