可以在一个或多个 Ajax 调用中显示来自不同 div 的多个 html 结果吗？

Question

Wondering if it's possible to get multiple divs refreshed with the data pulled from one or more Ajax calls, called by the same button.

I'm getting the correct results, just having a difficult time showing more than one div being refreshed with the html result.

I've tried the following ways;

$(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() {}
         });

});

And

$(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() {}
                });

});

Both these ways get me the results I want correctly, but both of these options only seem to display the first div each time.

If any more code needs to be seen, just ask!

Any ideas?

Answer 1

You can use Jquery When 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);
            });

        });