Multiple AJAX calls and show div on finish

Question

I have a JS script doing multiple AJAX requests. First I'm requesting a product by ID and then I'm requesting every single variant of this product. I can't do any form of backend coding since the environment I'm working in is closed.

My requests works fine, but right now I'm appending every single variant to a div, and my client don't really like this, so I was thinking is it possible to load all data into a variable and then fade in the parent div of all variants at the very end?

My script looks like this:

var variants = $('.single_product-variant-images');

$.ajax({
    url: productMasterURL,
    success: function (data) {
        $(data).find('Combinations Combination').each(function () {
            var variantID = $(this).attr('ProductNumber');

                $.ajax({
                    url: "/api.asp?id=" + escape(variantID),
                    dataType: "json",
                    async: true,
                    cache: true,
                    success: function (data) {
                        variants.append('<div class="variant"><a href="' + data.url + '" title="Vis variant"><img src="' + data.pictureLink + '" alt=""/></a></div>');                                                  
                        variants.find('.variant').fadeIn(300);
                }
            });

        });
    }
});

I would hide variants at the start and fade it in at the end. — Gerard, May 11 '17 at 12:13
What form is the first data in (the one in the main ajax call)? Is it an array, object, ...? — gforce301, May 11 '17 at 12:40
Possible duplicate of [How do I return the response from an asynchronous call?](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Liam, May 11 '17 at 12:44

dikkini · Answer 1 · 2017-05-11T21:04:51.850

Some fast and dirty solution, but idea and concept of solution is clear. It is bad solution, but works for you in your case when you have no access to backend code.

var all_load_interval;
var is_all_data_ready = false;

var all_data_count = 0;

var variants = $('.single_product-variant-images');

$.ajax({
    url: productMasterURL,
    success: function (data) {
        var data_count = $(data).find('Combinations Combination').length;
        $(data).find('Combinations Combination').each(function () {
            var variantID = $(this).attr('ProductNumber');
            $.ajax({
                url: "/api.asp?id=" + escape(variantID),
                dataType: "json",
                async: true,
                cache: true,
                success: function (data) {
                    // make div with class variant hidden
                    variants.append('<div class="variant"><a href="' + data.url + '" title="Vis variant"><img src="' + data.pictureLink + '" alt=""/></a></div>');   
                    // count every variant
                    all_data_count += 1 
                    if (all_data_count == data_count) {
                       // when all data got and created, lets trigger our interval - all_load_interval
                       is_all_data_ready = true; 
                    }                                          
                }
            });
        });
    }

    all_load_interval = setInterval(function() {
      // Check does all data load every second
      if (is_all_data_ready) {
        // show all div.variant
        variants.find('.variant').fadeIn(300);
        clearInterval(all_load_interval);
      }
    }, 1000);
});

Multiple AJAX calls and show div on finish

1 Answers1