1

I'm trying to learn javascript and jquery lately so I'm not so good yet.

The page I'm currently struggling with is a news page. Basically news are article tags and are contained in two different main category divs.

<body>
 <div class="a">
   <article> ... </article>
   <article> ... </article>
   <article> ... </article>
   ...
 </div>

 <div class="b">
   <article> ... </article>
   <article> ... </article>
   <article> ... </article>
   ...
 </div>
</body>

In each article there's a slideshow with pictures and this is the code in JS:

//dots functionality
dots = document.getElementsByClassName('dot');

for (i = 0; i < dots.length; i++) {

  dots[i].onclick = function() {

    slides = this.parentNode.parentNode.getElementsByClassName("mySlides");

    for (j = 0; j < this.parentNode.children.length; j++) {
      this.parentNode.children[j].classList.remove('active');
      slides[j].classList.remove('active-slide');
      if (this.parentNode.children[j] == this) {
        index = j;
      }
    }
    this.classList.add('active');
    slides[index].classList.add('active-slide');

  }
}

//prev/next functionality
links = document.querySelectorAll('.slideshow-container a');

for (i = 0; i < links.length; i++) {
  links[i].onclick = function() {
    current = this.parentNode;

    var slides = current.getElementsByClassName("mySlides");
    var dots = current.getElementsByClassName("dot");
    curr_slide = current.getElementsByClassName('active-slide')[0];
    curr_dot = current.getElementsByClassName('active')[0];
    curr_slide.classList.remove('active-slide');
    curr_dot.classList.remove('active');
    if (this.className == 'next') {

      if (curr_slide.nextElementSibling.classList.contains('mySlides')) {
        curr_slide.nextElementSibling.classList.add('active-slide');
        curr_dot.nextElementSibling.classList.add('active');
      } else {
        slides[0].classList.add('active-slide');
        dots[0].classList.add('active');
      }

    }

    if (this.className == 'prev') {

      if (curr_slide.previousElementSibling) {
        curr_slide.previousElementSibling.classList.add('active-slide');
        curr_dot.previousElementSibling.classList.add('active');
      } else {
        slides[slides.length - 1].classList.add('active-slide');
        dots[slides.length - 1].classList.add('active');
      }

    }

  }

}

It worked fine until I made the news data load on scroll with ajax. The JS code doesn't work anymore and I don't know how to fix it.

Here is the ajax code:

$(document).ready(function() {

        function getDataFor(category) {
          var flag = 0;

          function getData() {

            $.ajax({
              type: 'GET',
              url: 'get_data.php',
              data: {
                'offset': flag,
                'limit': 3,
                'cat': category
              },
              success: function(data) {
                $('.' + category).append(data);
                flag += 3;
              }
            });
          }

          getData();

          var $window = $(window);
          var $document = $(document);

          $window.on('scroll', function() {
            if ($window.scrollTop() >= $document.height() - $window.height()) {
              getData();
            }
          });
        }

        getDataFor('a');
        getDataFor('b');
      });
t2937941
  • 11
  • 3

0 Answers0