动态加载引导模式主体

Dynamically load a bootstrap modal body

本文关键字：模式 主体 加载 动态      更新时间：2023-09-26

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

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

任何帮助都将不胜感激！

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

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

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

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

相关文章：