Update the DOM with jQuery

Massimo Scola
Massimo Scola used Ask the Experts™
on
I am trying to integrate a carousel that can be used / controlled with swipe gestures: Swiper.

This is how the page structure looks like:

<!-- Swiper -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
      <div class="swiper-slide">Slide 6</div>
      <div class="swiper-slide">Slide 7</div>
      <div class="swiper-slide">Slide 8</div>
      <div class="swiper-slide">Slide 9</div>
      <div class="swiper-slide">Slide 10</div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
  </div>

  <!-- Swiper JS -->
  <script src="../dist/js/swiper.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper('.swiper-container', {
      pagination: {
        el: '.swiper-pagination',
        dynamicBullets: true,
      },
    });
  </script>

Open in new window


As I am using jQuery to retrieve the data from the server. Once the document has loaded, I collect all the items from the server using a REST API call, I generate the <img> tags with the appropriate src (location of the picture) and then I put them all into an array called allWidgetPictures[].

I use the following function to update the DOM:

      /**
       *@description Retrieves all picture URL for the carousel function
       */
      this.retrieveAllWidgetPictures = function() {
        for (i = 0; i < app.allWidgetPictures.length; i++) {
          console.log(app.allWidgetPictures[i] );
          $("#swiper-wrapper").after(app.allWidgetPictures[i] );
          
        }

      };

Open in new window


Is there anything else that I need to do in order to update the page, as the <img> tags do not appear after the <div swiper wrapper>.
The array is properly populated:

Annotation-2019-05-29-013803.png
Am I missing anything or why is the page not updated with all the <divs>?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
leakim971Multitechnician
Top Expert 2014

Commented:
I think you need to initialize the swiper after addign the images to the DOM :
Also if your array have all tag, just use jQuery.html instead jQuery.after so it replace all the content of  #swiper-wrapper instead adding

<script>
      /**
       *@description Retrieves all picture URL for the carousel function
       */
      this.retrieveAllWidgetPictures = function() {
          console.log( app.allWidgetPictures.join("") );
          $("#swiper-wrapper").html( app.allWidgetPictures.join() );
      };

    <!-- Initialize Swiper -->
    var swiper = new Swiper('.swiper-container', {
      pagination: {
        el: '.swiper-pagination',
        dynamicBullets: true,
      },
    });
</script>

Open in new window

Massimo ScolaSoftware Engineer

Author

Commented:
It is still not working  -  and it seems to easy:

https://idangero.us/swiper/get-started/
leakim971Multitechnician
Top Expert 2014

Commented:
replace :
$("#swiper-wrapper")
by :
$(".swiper-wrapper")

here a working page :
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
        var app = {
            allWidgetPictures: ["<div class='swiper-slide'><img src='//i0.wp.com/www.potins.net/wp-content/uploads/2019/04/scenes-de-nu-dans-game-of-thrones-emilia-clarke-ne-regrette-rien.jpg?resize=800%2C600&ssl=1'/></div>",
                "<div class='swiper-slide'><img src='//i0.wp.com/www.potins.net/wp-content/uploads/2019/03/jai-survecu-a-deux-ruptures-danevrisme-les-confidences-demilia-clarke-games-of-thrones.jpg?resize=800%2C600&ssl=1'/></div>",
                "<div class='swiper-slide'><img src='//i0.wp.com/www.potins.net/wp-content/uploads/2019/04/emilia-clarke.jpg?resize=800%2C600&ssl=1'/></div>"]
        }
    </script>
</head>
<body>
<!-- Swiper -->
<div class="swiper-container">
    <div class="swiper-wrapper"></div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
</div>
<!-- Swiper JS -->
<script src="//cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>

<!-- Initialize Swiper -->
<script>
    /**
     *@description Retrieves all picture URL for the carousel function
     */
    app.retrieveAllWidgetPictures = function() {
        console.log( app.allWidgetPictures.join("") );
        $(".swiper-wrapper").html( app.allWidgetPictures.join() );
    };

    app.retrieveAllWidgetPictures();

    <!-- Initialize Swiper -->
    var swiper = new Swiper('.swiper-container', {
        pagination: {
            el: '.swiper-pagination',
            dynamicBullets: true,
        },
    });
</script>
</body>
</html>

Open in new window

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial