На странице несколько блоков с 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 + '"]');
, а потом как нибудь проверить значение атрибута, и послать аякс запрос?
RunSpinner();