Можно отобразить несколько html результатов из разных дел в одном или нескольких Ajax вызовах?

Question

Интересно, можно ли обновить несколько элементов div с данными, извлеченными из одного или нескольких вызовов Ajax, вызываемых одной и той же кнопкой.

Я получаю правильные результаты, просто с трудом показываю, как обновляется более одного div с результатом html.

Я пробовал следующие способы;

$(document).on('click', '#customButton', function(event) {

var rangeDate_from = document.getElementsByName("rangeDate_from")[0].value;
var rangeDate_to = document.getElementsByName("rangeDate_to")[0].value;

  $.ajax({
       url: "load1.php",
       data: {'action' : 'search_prods', 'rangeDate_from' : rangeDate_from, 'rangeDate_to' : rangeDate_to},
       type: 'post',
       success: function(result) {
          form_updated = true;
          $('#dd_stocktake_details').html(result);
         },
           error: function() {}
         });

});

$(document).on('click', '#customButton', function(event) {

var rangeDate_from = document.getElementsByName("rangeDate_from")[0].value;
var rangeDate_to = document.getElementsByName("rangeDate_to")[0].value;

  $.ajax({
       url: "load2.php",
       data: {'action' : 'search_prods', 'rangeDate_from' : rangeDate_from, 'rangeDate_to' : rangeDate_to},
       type: 'post',
       success: function(result2) {
          form_updated = true;
          $('#dd_stocktake_details_2').html(result2);
         },
           error: function() {}
         });

});

И

$(document).on('click', '#customButton', function(event) {

var rangeDate_from = document.getElementsByName("rangeDate_from")[0].value;
var rangeDate_to = document.getElementsByName("rangeDate_to")[0].value;

  $.ajax({
       url: "load1.php",
       data: {'action' : 'search_prods', 'rangeDate_from' : rangeDate_from, 'rangeDate_to' : rangeDate_to},
       type: 'post',
       success: function(result) {
          form_updated = true;
          $('#dd_stocktake_details').html(result);
         },
           error: function() {}
         });

         $.ajax({
              url: "load2.php",
              data: {'action' : 'search_prods', 'rangeDate_from' : rangeDate_from, 'rangeDate_to' : rangeDate_to},
              type: 'post',
              success: function(result2) {
                 form_updated = true;
                 $('#dd_stocktake_details_2').html(result2);
                 alert(result2);
                },
                  error: function() {}
                });

});

Оба эти способа дают мне результаты, которые я хочу правильно, но оба эти параметра, кажется, только показывают первый div каждый раз.

Если есть нужно увидеть больше кода, просто спросите!

Есть идеи?

Answer 1

Вы можете использовать Jquery Когда ref: https://api.jquery.com/jQuery.when/

        $(document).on('click', '#customButton', function (event) {

            var result1;
            var result2;
            var rangeDate_from = document.getElementsByName("rangeDate_from")[0].value;
            var rangeDate_to = document.getElementsByName("rangeDate_to")[0].value;
            $.when(
                $.ajax({
                    url: "load1.php",
                    data: { 'action': 'search_prods', 'rangeDate_from': rangeDate_from, 'rangeDate_to': rangeDate_to },
                    type: 'post',
                    success: function (result) {
                        form_updated = true;
                        result1 = result;
                    },
                    error: function () { }
                });

            $.ajax({
                url: "load2.php",
                data: { 'action': 'search_prods', 'rangeDate_from': rangeDate_from, 'rangeDate_to': rangeDate_to },
                type: 'post',
                success: function (result) {
                    form_updated = true;
                    result2 = result2
                },
                error: function () { }
            });

            ).then(function () {
                $('#dd_stocktake_details').html(result1);
                $('#dd_stocktake_details_2').html(result2);
            });

        });