通過Ajax更新Bootstrap Modal - 爲什麼modal（'show'）不需要在這裏調用？

這段代碼（來自我正在開發的wordpress插件）似乎可以工作 - 使用Bootstrap 3和（native WP）jQuery 1.11打開模式，進行ajax調用，檢索一些數據並將其顯示在模式中。通過Ajax更新Bootstrap Modal - 爲什麼modal（'show'）不需要在這裏調用？

我很困惑的是，爲什麼模式打開時不打電話$('#registrantModal').modal('show');？

$(document).ready(function($) { 
    $('.get_registrants').click(function(){ 
     $(this).removeData('bs.modal'); 
     classDescription = $(this).attr("data-classDescription"); 
     className = $(this).attr("data-className"); 
     $('#registrantModal').find('#ClassTitle')[0].innerHTML = className; 
     $('#registrantModal').find('#ClasseRegistrants')[0].innerHTML = '<i class="fa fa-spinner fa-3x fa-spin"></i>'; 
     var htmlClassDescription = '<div class="modal_class_description">'; 
     htmlClassDescription += decodeURIComponent(classDescription) + '</div>'; 
     htmlClassDescription += '<h5 class="mz_registrants_header">Registrants</h5>'; 
     $('#registrantModal').find('#class-description-modal-body')[0].innerHTML = htmlClassDescription; 
     var ajaxFn = function() { 
      $.ajax({ 
       type: "GET", 
       dataType: 'json', 
       url: '/api/registrant/'+$(this).data('className'), 
       error: function(data) { 
            fakeResponse = {"message":"Student of a Class", "type":"success"} 
        if(fakeResponse.type == "success") { 
          htmlRegistrants = '<ul class="class_registrants">'; 
          htmlRegistrants += '<li>' + fakeResponse.message + '</li>'; 
          htmlRegistrants += '</ul>'; 
          $('#registrantModal').find('#ClasseRegistrants')[0].innerHTML = htmlRegistrants; 
        }else{ 
          $('#registrantModal').find('#class-description-modal-body')[0].innerHTML = "error!"; 
        } 
       } // ./ Ajax Success 
      }); // ./Ajax 
     } // ./ajaxFn 
     setTimeout(ajaxFn, 1000); 
    }); // ./Click 
});

這裏的HTML：

<a class="modal-toggle get_registrants btn" data-toggle="modal" data-target="#registrantModal" data-classDescription="Some Details about this event" data-className="Student of a Class" data-classID="12345" href="#">An Event</a> 

<div class="modal fade" id="registrantModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
       <h4 class="modal-title ' . $className .'" id="ClassTitle"></h4> 
      </div> 
      <div class="modal-body" id="class-description-modal-body"></div> 
      <div class="modal-body" id="ClasseRegistrants"></div> 
      <div class="modal-footer"> 
      </div> 
     </div> 
    </div> 
</div>

並有fiddle。

（在實際的代碼中，我使用WordPress管理AJAX調用和實際URI和數據點的功能。）

來源

2015-11-11 MikeiLL

這是因爲在a元素的屬性，使你的模式上點擊打開。

data-toggle="modal"

data-target="#registrantModal"

它等價的$(element).modal('show')。

查看文檔中的示例here

來源

2015-11-11 13:36:34 makshh

甜！我看到我可以在js中「切換」data-toggle =「modal」'和$（'＃registrantModal'）。modal（'show'）;'結果相同。任何讀者爲什麼在這種情況下比另一種更合適？ – MikeiLL

在你的情況下它並不重要，但有時你想顯示模式而不是點擊事件。 – makshh

通過Ajax更新Bootstrap Modal - 爲什麼modal（'show'）不需要在這裏調用？

回答

相關問題