添加ajax后，我的bootstrap模式变为空白

Question

我在向代码中添加ajax时遇到了问题。我正在尝试制作我的照相馆，以便我可以通过表格放入按类别过滤的图像。在我输入ajax之后，我的模态变成了空白，如下所示：

但不知何故，它确实显示了缩略图。它似乎没有采用模态的目标id。

这是我的ajax代码：

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);

和我的HTML（使用php下拉列表）：

<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

问题是您没有指示模态更新其内容。您可以在现有的javascript旁边添加以下javascript。基本上，这会根据单击的按钮更新模式的内容。在Varying modal content部分下的Bootstrap文档中详细解释了该功能。

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

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