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
    12 фев 2016 в 5:49
  • @quaresma89 - А Вы попробуйте.
    – user176262
    12 фев 2016 в 6:01
  • Работает спасибо.
    – quaresma89
    12 фев 2016 в 6:14

Ваш ответ

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

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