내가 JS 함수에 선언 3 개 변수를 가질

Question

동일한 파일에 모달로 JS 함수로부터 데이터를주고 내가 데이터

JS 표시 내 모달로 보낼 :

function consulter_salle(id) 
     { 
       $.ajax({ 
       url : "<?php echo site_url('index.php/batiment/list_salle')?>/"+id, 
       type: "POST", 
       dataType: "JSON", 
       success: function(data) 
       { 
        var table_header = "<table>"; 
        var table_footer = "</table>"; 
       var html =""; 

       for (var row in data) 
       { 
        html += "<tr><td>"+ data.id+"</td><td>"+data.libelle +"</td></tr>"; 
       } 

     $('#modal_list').modal('show'); // show bootstrap modal when complete loaded 
       $('.modal-title').text('Test'); 


       }, 
       error: function (jqXHR, textStatus, errorThrown) 
       { 
        alert('Error displaying data'); 
       } 
      }); 

     } 

을 내 모달 :

<div class="modal fade" id="modal_list" role="dialog"> 
     <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> 
      <h3 class="modal-title">Liste des salles</h3> 
      </div> 
      <div class="modal-body form"> 
      <form action="#" id="form" class="form-horizontal"> 

       <div class="form-body"> 

        </form> 
       </div> 
       <div class="modal-footer"> 
       <button type="button" id="btnSave" onclick="save()" class="btn btn-primary">Save</button> 
       <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button> 
       </div> 
      </div><!-- /.modal-content --> 
      </div><!-- /.modal-dialog --> 
     </div> 
     </body> 
    </html> 

데이터 내가 내 컨트롤러에 의해 보냈 목록이며, 데이터를 받았습니다 것으로 확인 된,하지만 난 모달로 보낼 수있는 방법을 찾을 수 없습니다. 모달 - 본문 섹션에 쓸 내용이 궁금합니다! 감사합니다.

Answer 1

다음은 작동 예제입니다.

// Example result, JS Object 
 
var result = { 
 
    id: 12, 
 
    title: 'My title', 
 
    content: '<div>My example content</div>' 
 
    
 
} 
 
    
 
// your ajax success method 
 
function ajaxSuccess(result) { 
 
    var modal = $('#modal_list'); 
 
    modal.modal('show'); 
 

 
    modal.find('.modal-title').html(result.title); 
 
    modal.find('.modal-body').html(result.content); 
 
} 
 
    
 
ajaxSuccess(result); 
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
<div class="modal fade" id="modal_list" role="dialog"> 
 
    <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> 
 
       <h3 class="modal-title">Liste des salles</h3> 
 
      </div> 
 
      <div class="modal-body form"> 
 
       <form action="#" id="form" class="form-horizontal"> 
 

 
        <div class="form-body"> 
 

 
       </form> 
 
      </div> 
 
      <div class="modal-footer"> 
 
       <button type="button" id="btnSave" onclick="save()" class="btn btn-primary">Save</button> 
 
       <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button> 
 
      </div> 
 
     </div> 
 
      <!-- /.modal-content --> 
 
    </div> 
 
    <!-- /.modal-dialog --> 
 
</div>