my bootstrap modal turns out blank after adding ajax - php

Question

I've got a problem adding ajax to my code. I'm trying to make my photogallery so I can put in images filtered by categories trough a form. After I put in ajax, my modal turns out blank like this:
But somehow it does display the thumbnail picture. It seems to not take the target id's of the modal.
Here's my ajax code:
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();
});
my php code:
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);
and my html (with php dropdown):
<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

The issue is that you do not instruct the modal to update its contents. You can do so by adding the following javascript next to your existing one. Basically this updates the contents of the modal depending on which button was clicked. The functionality is explained in detail in the Bootstrap docs under the Varying modal content section.
$('#image-gallery').on('show.bs.modal', function (event) {
var thumbnail = $(event.relatedTarget),
imageSrc = thumbnail.data('image');
$('#image-gallery-image').attr('src', imageSrc);
});