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