I’ve been working on a dynamic code for a modal carousel in ajax and bootstrap 4. I have not been able to clear the bootstrap carousel content after each event in ajax calls.
I have tried to use some jquery functions like ('.imagen').remove, (’.data-slide-to’).html("") or $(“body”).html(content) in ajax to refresh the page and prevent increases of data every time I open modal carousel but the html content is not removed. Someone knows how to get it. Thanks in advence.
main.php
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Carousel with ajax</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script type="text/javascript" src="js/ajaxCarousel.js"></script>
<style>
.box {
background-color: darkslategray;
}
.carousel-control-prev {
background-color: darkslategray;
}
.carousel-control-next {
background-color: darkslategray;
}
</style>
</head>
<body>
<div class="container">
<h2>Carousel with ajax</h2>
<div class="row">
<!-- TRIGGER BOOTSTRAP CAROUSEL -->
<a href="image.php" class="modalImage" data-toggle="modal" data-var="images/image/">
<img class="img-fluid" src="image.png" alt="" style="width:20%">
</a>
<!-------------- MODAL --------------->
<div class="modal fade" id="myModal">
<div class="modal-dialog d-flex justify-content-center align-items-center modal-xl">
<div class="modal-content">
<!-- BOOTSTRAP CAROUSEL -->
<div class="container box">
<div id="carousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators"></ol>
<!-- Wrapper for slides -->
<div class="carousel-inner"></div>
<!-- Controls -->
<a class="carousel-control-prev">
</a>
<a class="carousel-control-next">
</a>
</div>
<!-- CLOSE BOOTSTRAP CAROUSEL -->
</div>
</div>
</div>
</div>
<!-------------- ClOSE MODAL -------------->
</div>
</div>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js" integrity="sha384-zDnhMsjVZfS3hiP7oCBRmfjkQC4fzxVxFhBx8Hkz2aZX8gEvA/jsP3eXRCvzTofP" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
</body>
</html
image.php
<?php
header('Content-Type: application/json');
$directory = $_POST['var'];
echo json_encode (glob($directory. '*.{png,mp4}', GLOB_BRACE));
?>
ajaxCarousel.js
$(document).ready(function(){
$('.modalImage').click(function (event) {
event.preventDefault();
var data = this.dataset;
$.ajax({
url: "image.php",
data: data,
type: "POST",
dataType: "json",
success: function(data) {
data.filter(function (img) {
return img.substring(img.lastIndexOf('.')) === '.png';
}).forEach(function (img, index) {
$('<div class="carousel-item"><img class="d-block img-fluid" src="' + img + '"></div>').appendTo('.carousel-inner');
$('<li data-target="#carousel" data-slide-to="' + index + '"></li>').appendTo('.carousel-indicators');
})
$('.modal-content').html();
$('#myModal').modal({show:true});
$('#carousel').carousel();
$('.carousel-indicators > li').first().addClass('active');
$('.carousel-item').first().addClass('active');
$('<a href="#carousel" data-slide="prev"><span class="carousel-control-prev-icon"></span></a>').appendTo('.carousel-control-prev');
$('<a href="#carousel" data-slide="next"><span class="carousel-control-next-icon"></span></a>').appendTo('.carousel-control-next');
}
});
});
});
