1

Правильно ли делать запрос в запросе? Мне нужно дождаться пока первы аякс запрос вернет из базы значения и срендерит инпуты и кнопки, и после этого кликая по кнопке посылаю еще один аякс запрос.

$('#dep-box').on('click', '.show-holidays', function(){
        var btn = $(this);
        var id = btn.parents('form').data('dep-id');

            $.ajax({
                url : '/settings/get_holidays',
                method: 'POST',
                dataType: 'json',
                data: { id : id },
                success: function(data){
                    var holidaysForm = $('#holidaysFormTpl').render(data);
                    $('.display-table .tbody').append(holidaysForm);    
                    initializeDtepicker2();

                    $('.add-holiday').click(function(){
                        var btnSaveHol = $(this);

                        $.ajax({
                            url : '/settings/add_holidays',
                            method : 'POST',
                            data : btnSaveHol.parents('form').serialize(),
                            dataType : 'json',
                            success : function(data){

                            }
                        });
                    });
                }
            });
    });

1 ответ 1

3

Нет, неправильно.

Вообще, "запрос в запросе" сам по себе приемлем, но у Вас-то никакого "запроса в запросе" нет. Событие click новой кнопки и, соответственно, второй ajax запрос произойдут позднее, когда обработчик success первого запроса уже давно отработает. У Вас, однако, другая проблема.

Если на Вашей странице окажутся другие элементы с классом add-holiday (а не только новый, только что созданный), то Вы будете повторно навешивать на них дополнительные обработчики click, которые все будут выстреливать при нажатии этих кнопок.

Делайте такое же делегирование обработки события click для '.add-holiday' как и для '.show-holidays'.

$('#dep-box').on('click', '.show-holidays', function(){
    var btn = $(this);
    var id = btn.parents('form').data('dep-id');

    $.ajax({
        url : '/settings/get_holidays',
        method: 'POST',
        dataType: 'json',
        data: { id : id },
        success: function(data){
            var holidaysForm = $('#holidaysFormTpl').render(data);
            $('.display-table .tbody').append(holidaysForm);    
            initializeDtepicker2();

        }
    });
});

$('.display-table .tbody').on('click', '.add-holiday', function(){
    var btnSaveHol = $(this);

    $.ajax({
        url : '/settings/add_holidays',
        method : 'POST',
        data : btnSaveHol.parents('form').serialize(),
        dataType : 'json',
        success : function(data){

        }
    });
});

Да, и мне кажется, что в Вашем случае больше подходит метод jQuery closest, а не parents.

3
  • Я не смогу навесить клик на .add-holiday таким образом так как кнопка появляется после первого запроса ajax, а таким образом я буду искать кнопку до того как она появилась,селектор просто не найдет ее.
    – quaresma89
    Commented 12 февр. 2016 в 5:49
  • @quaresma89 - А Вы попробуйте.
    – user176262
    Commented 12 февр. 2016 в 6:01
  • Работает спасибо.
    – quaresma89
    Commented 12 февр. 2016 в 6:14

Ваш ответ

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

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