Отправить data каждого div

Question

есть несколько div c #schedule_slots на странице, у них есть атрибут например data-offer-id, необходимо при загрузке страницы отправлять Ajax каждый data-offer-id Далее получать данные json и подставлять в нужные div

Сам ajax запрос:

$.ajax({
    url: '/url',
    type: 'post',
    data: {'offer_id': '195'},
    dataType: 'json',
    beforeSend: function() {
        // loader_add
        html = '<div id="item-loader" style="position:absolute; z-index: 999; background: rgba(255, 255, 255, .5); left: 0; right: 0; top: 0; bottom: 0;"><div class="d-flex justify-content-center h-100"><div class="spinner-grow text-primary my-auto" style="width: 5rem;height: 5rem;" role="status"><span class="sr-only">Loading...</span></div></div></div>';

        $('#schedule_slots').css('position', 'relative');
        $('#schedule_slots').append(html);
    },      
    success: function(json) {

            for (var i = 0; i < json.length; i++) {
                $('#schedule_slots').append('<button type="button" class="btn btn-primary btn-booking small  mr-2 mb-2 p-1" style="width: 66px;">'+ json[i]['time'] +'</button>');
            }


        // loader_remove
        $('#item-loader').remove();
    }
});

Не понимаю как именно написать скрипт для того чтобы он отправлял каждый

Answer 1

#schedule_slots нельзя несколько одинаковых id иметь на одной странице. Браузер на такое ругается. Пользуйтесь классами для пометки каких-либо элементов на странице, например js-shedule-slots. Тогда и селектор поменяется на '.js-shedule-slots'.
Как пытаетесь собирать информацию с data атрибутов? В чем там загвоздка?

Answer 2

Первое, что нужно сделать, это в html-коде заменить id="schedule_slots" на class="schedule_slots".

Далее проходим по всем .schedule_slots с помощью метода each, получаем данные из data и отправляем запрос:

$('.schedule_slots').each(function(){
    let $schedule_slot = $(this);

    $.ajax({
        url: '/url',
        type: 'post',
        data: {'offer_id': $schedule_slot.data('offer-id')},
        dataType: 'json',
        beforeSend: function() {
            // loader_add
            html = '<div id="item-loader" style="position:absolute; z-index: 999; background: rgba(255, 255, 255, .5); left: 0; right: 0; top: 0; bottom: 0;"><div class="d-flex justify-content-center h-100"><div class="spinner-grow text-primary my-auto" style="width: 5rem;height: 5rem;" role="status"><span class="sr-only">Loading...</span></div></div></div>';

            $schedule_slot.css('position', 'relative');
            $schedule_slot.append(html);
        },      
        success: function(json) {
            for (var i = 0; i < json.length; i++) {
                $schedule_slot.append('<button type="button" class="btn btn-primary btn-booking small  mr-2 mb-2 p-1" style="width: 66px;">'+ json[i]['time'] +'</button>');
            }

            // loader_remove
            $('#item-loader').remove();
        }
    });
});

БЛОГ НА HUSL

Отправить data каждого div

Ответы (2 шт):