1

Creating a 'refresh' button via jQuery, AJAX and PHP.

This particular one I'm having control two DOM instances (divs) - #sold-container, and also #totalorderswidget.

$(document).ready(function() {
    $(function() {
        $('#orderfeed').on('click', function() {
            var orders;
            $.ajax({
                type: 'POST',
                url: 'liveorderwidget.php',
                beforeSend: function() {
                    $('#sold-container').html('<div class="page-loader"></div>');
                    $.ajax({
                        url: "totalorderswidget.php",
                        beforeSend: function() {
                            $('#totalorderswidget').html('<div class="page-loader"></div>');
                        },
                        success: function(orderdata) {
                            // $('#totalorderswidget').html(orderdata);
                            orders = orderdata;
                        }
                    });
                },
                success: function(solddata) {
                    $('#sold-container').html(solddata);
                    $('#totalorderswidget').html(orders);
                }
            })
        });
    });
});

I didn't like how each DIV was updating and showing my page-loader CSS at different times, so I thought I'd try and grab the data to pass and display them both at the same time (get data from the first ajax call, display both on the second).

This is working as two normal AJAX calls, and each appends the success html to each id on it's own. (uncommenting // $('#totalorderswidget').html(orderdata); works),

but initializing a variable like var orders; outside the functions and trying to put the data in the success call (orders = orderdata;) does not work.

Doing a console.log on the first AJAX success call (orderdata) brings back the expected response, but trying to use it in the second AJAX call ($('#totalorderswidget').html(orders);) does not work and a console.log brings back undefined for the order variable.

What must I change in order to grab data from the first success call function and bring this data into the second/final ajax success call?

Brian Bruman
  • 883
  • 12
  • 28

0 Answers0