0

есть несколько 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();
    }
});

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

2
  • Вы же в курсе, что на странице не может быть несколько элементов с одинаковым ID?
    – Neolot
    Commented 29 апр. 2020 в 17:10
  • как минимум изменить id на class
    – Alpha
    Commented 29 апр. 2020 в 17:10

2 ответа 2

1

Первое, что нужно сделать, это в 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();
        }
    });
});
2
  • Спасибо большое за ответ! Он очень помог, а если мне нужно получить слоты одного div, то писать новую функцию для этого? Commented 30 апр. 2020 в 13:23
  • Да, это должен быть другой код. Отметьте мой ответ решением, пожалуйста.
    – Neolot
    Commented 30 апр. 2020 в 14:00
1
  1. #schedule_slots нельзя несколько одинаковых id иметь на одной странице. Браузер на такое ругается. Пользуйтесь классами для пометки каких-либо элементов на странице, например js-shedule-slots. Тогда и селектор поменяется на '.js-shedule-slots'.
  2. Как пытаетесь собирать информацию с data атрибутов? В чем там загвоздка?

Ваш ответ

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

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