아약스 추가 후 내 부트 스트랩 모달이 비어 있음

Question

내 코드에 아약스를 추가하는 데 문제가 있습니다. 나는 포토 갤러리를 만들려고 노력하고있어 이미지를 카테고리 트로프 형태로 필터링 할 수 있습니다. 아약스를 넣은 후 내 모달은 다음과 같이 비어 있습니다.

그러나 어떻게 든 축소판 그림을 표시합니다. 모달의 목표 ID를 사용하지 않는 것 같습니다.

여기 내 아약스 코드입니다 :

function fotoalbumfilter() { 
    $.ajax({ 
     url: '../ajax/fotoalbumfilter.php', 
     data: { 
      categorie: $('#fotoalbumfilter').val() 
     }, 
     type: "POST", 
     dataType: 'json' 
    }).done(function(result) { 
     var jsonResult = result; 
     var outputgallery = jsonResult.outputgallery; 
     $('#output-gallery').html(outputgallery); 
    }).fail(function(jqXHR, textStatus, errorThrown) { 
     console.log(jqXHR, textStatus, errorThrown); 
    }); 
}; 

$(document).ready(function() { 
    fotoalbumfilter(); 
}); 

내 PHP 코드 :

define('AJAX_REQUEST', isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest'); 
if(!AJAX_REQUEST) { die();} 
require_once('../app_config.php'); 

if($_POST['categorie']){ $categorie = $_POST['categorie']; }else{ $categorie = ''; } 

$result = array(); 

if($categorie == ''){ $fotos = ''; }else{ $fotos = "WHERE (categorie_id = '".$categorie."')"; } 

$r = 0; 

$querycategorie = mysqli_query($con, "SELECT * FROM fotos ".$fotos." ORDER BY timestamp ASC"); 

while($uitkomst = mysqli_fetch_array($querycategorie)){ 
    $weergave = 1; 

    $titel = $uitkomst['titel']; 
    $foto = $uitkomst['naam']; 

    $r++; 

    if($r == 1){ $outputgallery = '<div class="row">'; }  
    $outputgallery .= '<div class="col-lg-3 col-sm-4 col-md-4 col-xs-6 fotocontaineralbum"> 
     <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="'.$titel.'" data-image="/images/fotoalbum/'.$foto.'" data-target="#image-gallery"> 
     <img class="img-fluid" src="/images/fotoalbum/'.$foto.'"> 
     </a></div>'; 

    if($r == 4){ $outputgallery .= '</div>'; $r = 0; }  
} 

if($r !== 0){ $outputgallery .= '</div>'; } 

$outputgallery = utf8_encode($outputgallery); 
$result['outputgallery'] = $outputgallery; 

echo json_encode($result); 

과 (PHP 드롭 다운에) 내 HTML :

<div class="container"> 
    <div class="col-md-12 pagecontainer container"> 
     <div class="row"> 
      <div class="col-md-12"> 
       <center><h2><span class="impactfont mcorange" style="margin:20px;">Het Fotoalbum</span></h2></center> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-md-4"> 
       <div class="categoriecontainer impactfont"> 
        <select class="categoriedropdown" onchange="fotoalbumfilter()" id='fotoalbumfilter'> 
         <option>Kies een categorie</option> 
         <?php 
         mysqli_query($con, "SET CHARACTER SET utf8_general_ci");     
         $query = mysqli_query($con, "SELECT * FROM foto_categorie ORDER BY 'id' ASC") or die (mysqli_error($con)); 
         while($uitkomst = mysqli_fetch_array($query)){ 
         $categorie = $uitkomst["categorie"]; 
         $id = $uitkomst["id"]; 
         ?>    
         <option value="<?php echo $id; ?>"><?php echo $categorie;?></option> 
         <?php } ?> 
        </select> 
       </div> 
      </div> 
     </div> 

     <div class="col-md-12 padding20 pagecontent"> 
      <div id="output-gallery"> 
      </div> 
     </div> 
    </div> 
</div> 

<div class="modal fade" id="image-gallery" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <h4 class="modal-title" id="image-gallery-title"></h4> 
       <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> 
      </div> 

      <div class="modal-body"> 
       <img id="image-gallery-image" class="img-fluid" src=""> 
      </div> 

      <div class="modal-footer"> 
       <div class="col-md-2 floatl"> 
        <button type="button" class="btn btn-primary floatl" id="show-previous-image">Previous</button> 
       </div> 
       <div class="col-md-8 text-justify" id="image-gallery-caption"> 
       </div> 
       <div class="col-md-2 floatr"> 
        <button type="button" id="show-next-image" class="btn btn-default floatr">Next</button> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

문제는 없다는 것입니다 모달에 내용을 업데이트하도록 지시하십시오. 기존 자바 스크립트 옆에 다음 자바 스크립트를 추가하면됩니다. 기본적으로 이것은 클릭 된 버튼에 따라 모달의 내용을 업데이트합니다. 이 기능은 부트 스트랩 문서의 Varying modal content 섹션에 자세히 설명되어 있습니다.

$('#image-gallery').on('show.bs.modal', function (event) { 
    var thumbnail = $(event.relatedTarget), 
     imageSrc = thumbnail.data('image'); 

    $('#image-gallery-image').attr('src', imageSrc); 
});