CODEWITHSUNDEEP
javascriptjquery
Joe
Joe

Reputation: 1635

Append Order - jQuery

I am trying to get the string to order by how it is displayed (red,blue,orange,black). For some reason, it will append the order randomly. For Example: it would output (blue,orange,red,black). Any help would be great. Thanks.

var tCookie = "red,blue,orange,black";
var Cookies = tCookie.split(',');

if (Cookies) {
    for (var i = 1; i <= Cookies.length; i++) {

        var dataString = "TabId="+Cookies[i]+"";

        $.ajax({
            type: "POST",
            url: "includes/tab.php",
            data: dataString,
            cache: false,
            success: function(html){
                $("#Dynamic_Tab").append(html).children(':last').hide().fadeIn("fast");
            }
        });
    }
}

Upvotes: 0

Views: 2205

Answers (2)

Jasper
Jasper

Reputation: 76003

You can use deferred objects here to only append the HTML after all of the AJAX requests come back:

//create array to store XHR objects that will resolve when the AJAX requests return
//also create an object to store the AJAX responses
var jqXHRs    = [],
    responses = {};

//iterate through each of the cookie indexes
$.each(cookies, function (index, value) {

    //create the dataString and cache the value of this index so it can be used in the success callback for the AJAX request associated with this index
    var dataString = "TabId=" + value,
        thisValue  = value;

    //store an empty string in the output variable for the current index, this keeps it's place in-line
    responses[thisValue] = '';

    //do the AJAX request and store it's XHR object in the array with the rest
    jqXHRs[jqXHRs.length] = $.ajax({
        type    : "POST",
        url     : "includes/tab.php",
        data    : dataString,
        cache   : false,
        success : function (html) {

            //now that the AJAX request has returned successfully, add the returned HTML to the output variable for this index
            responses[thisValue] = html;
        }
    });
});

//wait for all of the XHR objects to resolve then add all the HTML to the DOM
$.when(jqXHRs).then(function () {

    //all of the AJAX requests have come back and you can now add stuff to the DOM
    var $element = $("#Dynamic_Tab");
    $.each(responses, function (index, value) {
        $element.append(value).children(':last').hide().delay(index * 250).fadeIn(250);
    }
});

The .delay() is so that each new row will fade in, in order.

Upvotes: 1

pimvdb
pimvdb

Reputation: 154848

You could have a list of requests and responses, and start appending when all are done, so that the order is always correct:

var deferreds = [],
    results = [];

for (var i = 1; i <= Cookies.length; i++) {
    (function(i) { // to freeze i

        var dataString = "TabId="+Cookies[i]+"";

        deferreds.push($.ajax({
            type: "POST",
            url: "includes/tab.php",
            data: dataString,
            cache: false,
            success: function(html){
                results[i] = html; // insert at the synchronous position
            }
        }));

    })(i);
}

$.when.apply($, deferreds).then(function() {
    $.each(results, function(i, html) {
         $("#Dynamic_Tab").append(html).children(':last').hide().fadeIn("fast");
    });
});

Upvotes: 1

Related Questions