Bootstrap Modal AJAX Call Not Displaying

Question

Я пытаюсь показать модальное диалоговое окно в списке результатов поиска, отображаемых в таблице. Когда пользователь нажимает кнопку, чтобы отобразить диалог, мне нужно передать значение из кода PHP в модальное диалоговое окно, чтобы оно могло извлекать данные о записи, на которую они нажали, затем появится в модальном диалоговом окне.

Вот HTML для таблицы результатов:

<tr> 
<td><button class="btn btn-default" recid="33926" onclick="showModal(33926)">Review</button></td><td>1</td><td>Pending</td><td>001</td> 
</tr> 
<tr> 
<td><button class="btn btn-default" recid="33951" onclick="showModal(33951)">Review</button></td><td>1</td><td>Pending</td><td>002</td> 
</tr> 

Вот Javascript, который вызывается при нажатии кнопки Обзор щелкают:

<script type="text/javascript"> 
     function showModal(recid) 
     { 
     var xmlhttp; 
     if (window.XMLHttpRequest) 
      {// code for IE7+, Firefox, Chrome, Opera, Safari 
      xmlhttp=new XMLHttpRequest(); 
      } 
     else 
      {// code for IE6, IE5 
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
      } 
     xmlhttp.onreadystatechange=function() 
      { 
      if (xmlhttp.readyState==4 && xmlhttp.status==200) 
      { 
      document.getElementById("myModal").innerHTML=xmlhttp.responseText; 
      } 
      } 
     xmlhttp.open("POST","modalInc.php",true); 
     xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
     xmlhttp.send("recid="+recid); 
     return false; // Do not follow hyperlink 
     } 
     </script> 

и вот HTML для модального диалога, который должен появляются с динамическим контентом:

<div class="modal fade bs-example-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> 
     <h4 class="modal-title" id="myModalLabel">Modal Title</h4> 
     </div> 
     <div class="modal-body"> 
      <div id="modalContent"> 

      </div> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Approve</button> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Reject</button> 
     <button type="button" class="btn btn-default" data-dismiss="modal">On Hold</button> 
     </div> 
    </div> 
    </div> 
    </div> 

Модальный диалог не bei ng показано на данный момент - я подозреваю, что Javascript не вызывает его правильно, но я не могу получить правильный синтаксис для этого.

Answer 1

Я предполагаю, что вы возвращаете модальный html уже. Вы устанавливаете модальный диалог html, но вам также нужно вызвать модальный диалог. Вы можете использовать следующее;

... if (xmlhttp.readyState==4 && xmlhttp.status==200) { var modalObj = document.getElementById("myModal"); modal.innerHTML = xmlhttp.responseText; modal.modal(); } .....