動態加載自舉模態主體

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

然后調用模態函數的其余部分以顯示它。 除非我誤解了您要做什么。