How to clear data in dynamic bootstrap modal carousel (ajax)

How to clear data in dynamic bootstrap modal carousel (ajax)

Hi. I’ve been create a dynamic code for 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.

index.php
  1. <!DOCTYPE html>
  2. <html lang="es">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Carousel with ajax</title>
  6. <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7. <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
  8. <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
  9. <script type="text/javascript" src="js/ajaxCarousel.js"></script>

  11. <style>
  12. .box {
  13. background-color: darkslategray;
  14. }
  15. .carousel-control-prev {
  16. background-color: darkslategray;
  17. }
  18. .carousel-control-next {
  19. background-color: darkslategray;
  20. }
  21. </style>

  23. </head>
  24. <body>

  26. <div class="container">
  27. <h2>Carousel with ajax</h2>
  28. <div class="row">
  29. <!-- TRIGGER BOOTSTRAP CAROUSEL -->
  30. <a href="image.php" class="modalImage" data-toggle="modal" data-var="images/image/">
  31. <img class="img-fluid" src="image.png" alt="" style="width:20%">
  32. </a>

  34. <!-------------- MODAL --------------->
  35. <div class="modal fade" id="myModal">
  36. <div class="modal-dialog d-flex justify-content-center align-items-center modal-xl">
  37. <div class="modal-content">
  38. <!-- BOOTSTRAP CAROUSEL -->
  39. <div class="container box">
  40. <div id="carousel" class="carousel slide" data-ride="carousel">
  41. <!-- Indicators -->
  42. <ol class="carousel-indicators"></ol>
  43. <!-- Wrapper for slides -->
  44. <div class="carousel-inner"></div>
  45. <!-- Controls -->
  46. <a class="carousel-control-prev">
  47. </a>
  48. <a class="carousel-control-next">
  49. </a>
  50. </div>
  51. <!-- CLOSE BOOTSTRAP CAROUSEL -->
  52. </div>
  53. </div>
  54. </div>
  55. </div>
  56. <!-------------- ClOSE MODAL -------------->

  58. </div>
  59. </div>
  60. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
  61. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js" integrity="sha384-zDnhMsjVZfS3hiP7oCBRmfjkQC4fzxVxFhBx8Hkz2aZX8gEvA/jsP3eXRCvzTofP" crossorigin="anonymous"></script>
  62. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  63. </body>
  64. </html>
  

   

  

  

   image.php
  1. <?php
  2. header('Content-Type: application/json');
  3. $directory = $_POST['var'];
  4. echo json_encode (glob($directory. '*.{png,mp4}', GLOB_BRACE));
  5. ?>
  

   
    

     

    

    

     ajaxCarousel.js
    

    

     

    

    

     
    
      
  1. $(document).ready(function(){
    2. 
      
  2.  $('.modalImage').click(function (event) {
    3. 
      
  3.  event.preventDefault();
    4. 
      
  4.  var data = this.dataset;
    5. 
      
  5.  $.ajax({
    6. 
      
  6.  url: "image.php",
    7. 
      
  7.  data: data,
    8. 
      
  8.  type: "POST",
    9. 
      
  9.  dataType: "json",
    10. 
      
  10.  success: function(data) {
    11. 
      
  11.  data.filter(function (img) {
    12. 
      
  12.  return img.substring(img.lastIndexOf('.')) === '.png';
    13. 
      
  13.  }).forEach(function (img, index) {
    14. 
      
  14.  $('<div class="carousel-item"><img class="d-block img-fluid" src="' + img + '"></div>').appendTo('.carousel-inner');
    15. 
      
  15.  $('<li data-target="#carousel" data-slide-to="' + index + '"></li>').appendTo('.carousel-indicators');
    16. 
      
  16.  })
    17. 
      
  17.  $('.modal-content').html();
    18. 
      
  18.  $('#myModal').modal({show:true});
    19. 
      
  19.  $('#carousel').carousel();
    20. 
      
  20.  $('.carousel-indicators > li').first().addClass('active');
    21. 
      
  21.  $('.carousel-item').first().addClass('active');
    22. 
      
  22.  $('<a href="#carousel" data-slide="prev"><span class="carousel-control-prev-icon"></span></a>').appendTo('.carousel-control-prev'); 
    23. 
      
  23.  $('<a href="#carousel" data-slide="next"><span class="carousel-control-next-icon"></span></a>').appendTo('.carousel-control-next');
    24. 
      
  24.  } 
    25. 
      
  25.  });
    26. 
      
  26.  });
    27. 
      
  27. });
    28.