0

На странице несколько блоков с data-атрибутом

<div data-ajax="value1"></div>
...
<div data-ajax="value2"></div>
...
<div data-ajax="valueN"></div>

Есть вот такой код

var LoadOnScreen = function () {
jQuery(window).scroll(function() {
    var $block = jQuery('[data-ajax="value1"]');
    var $data = $block.data('product');
    if (jQuery(window).scrollTop() + jQuery(window).height() >= $block.offset().top) {
        if(!$block.attr('loaded')) {
            $block.attr('loaded', true);

            RunSpinner(); // show Spinner

            setTimeout(function () {
                jQuery.ajax({
                    url: "/url/to/" + $block + "/" + $data,
                    type: "get",
                    dataType: "html",
                    success: function (template) {
                        StopSpinner(); // hide the spinner
                        $block.html(template);
                    },
                    error: function (error) {
                        $block.html("<p>Произошла ошибка при получении данных</p>");
                    }
                });
            }, 1000);
        }
    }
});

};

Когда блок появился на экране, посылается аякс запрос. Если просто оставить data-ajax без значения, то при появлении первого блока с этим атрибутом, он посылает запрос для всех блоков.

Вопрос в том, как можно динамически подставить значение в дата атрибут? Примерно так jQuery('[data-ajax="' + value + '"]');, а потом как нибудь проверить значение атрибута, и послать аякс запрос?

3
  • Когда блок появился на экране, посылается аякс запрос - а откуда он взялся?
    – MihailPw
    Commented 10 июн. 2017 в 19:23
  • В функции этот аякс запрос идет, после RunSpinner();
    – Alex_01
    Commented 11 июн. 2017 в 7:34
  • Возможный дубликат вопроса: Найти data-value на странице
    – bad4iz
    Commented 11 июн. 2017 в 8:40

1 ответ 1

0

Если я вас правильно понял, то вам всего-навсего требовалось правильно выбирать блоки, для которых посылать ajax-запросы. Это можно обеспечить с помощью .grep():

function showDisplayingBlocks() {
  // получаем список требуемых для загрузки блоков
  let blocks = $.grep($('div[data-ajax]'), function(el) {
    // проверяем на то, загружен ли блок
    let loaded = $(el).data('loaded');
    if (loaded)
      return false;

    // проверяем на отображение блока во вьюпорте
    let elementOffset = $(el).offset().top;
    let elementHeight = $(el).height();
    let windowOffset = $(window).scrollTop();
    let windowHeight = $(window).height();
    if (windowOffset > elementOffset + elementHeight)
      return false;
    if (windowOffset + windowHeight < elementOffset)
      return false;
    return true;
  });

  // отправляем ajax-запросы для всех требуемых блоков 
  $(blocks).each(function() {
    let el = $(this);
    el.html('Loading...');
    el.data('loaded', true);
    let ajaxData = el.data('ajax');

    // имитация ajax-запроса
    setTimeout(function() {
      el.html('<span>3</span>');
      setTimeout(function() {
        el.html('<span>2</span>');
        setTimeout(function() {
          el.html('<span>1</span>');
          setTimeout(function() {
            el.html('Loaded ' + ajaxData);
          }, 1000);
        }, 1000);
      }, 1000);
    }, 1000);
  });
}

$(document).ready(showDisplayingBlocks);
$(document).scroll(showDisplayingBlocks);
div {
  height: 300px;
  line-height: 300px;
  text-align: center;
}

span {
  font-size: 60px;
}

div:nth-child(2n + 1) {
  color: white;
  background-color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div data-ajax="value1"></div>
<div data-ajax="value2"></div>
<div data-ajax="value3"></div>
<div data-ajax="value4"></div>
<div data-ajax="value5"></div>
<div data-ajax="value6"></div>

1
  • То что нужно. Спасибо!)
    – Alex_01
    Commented 11 июн. 2017 в 8:53

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.