jquery ajax - maintain ajax call sequence

Question

I know my questions is marked as duplicate. But the given answer is using async:false. I don't want to force synchronous requests. How do maintain async ajax call sequence ???

I don't need to replace the content. I need to append svg one after another in a sequence.

I am appending 5 svg elements in a div. All svgs are coming by ajax call. The issue is the order of those svgs. Every time they appended in different order. I want to maintain their order. Please find below my code:

    FlagRow.DEFAULTS = {
                flagOrder: [
                        Enums.flagType.INDIA,
                        Enums.flagType.USA,
                        Enums.flagType.UK,
                        Enums.flagType.FRANCE,
                        Enums.flagType.GERMANY
                ]
            }
var container = $(document.createElement("div"));
    var topic = new Array();
            for (var key in this.options.flagOrder) {
                topic.push(this.options.flagOrder[key]);            
            } 

    var appendFlag = function (flag) {
                console.log(flag);
                var svgDiv = $(document.createElement("div"));
                $(svgDiv).addClass('svgDiv');

                var importedSVGRootElement = document.importNode(flag.documentElement, true);
                $(importedSVGRootElement).attr('viewBox', '0 0 100 125');

                svgDiv.append(importedSVGRootElement)
                container.append(svgDiv);                
            } 

    $.each(topic, function (i, val) {            
                $.when(//ajax call to get flag svg).done(function (flag ) { appendFlag(flag ); });
    });



     // api call to get flag svg
    var deferred = $.Deferred();
        $.ajax({
                        url: url,
                        type: 'get',
                        data: '',
                        dataType: 'xml',
                        timeout: 300000,
                        success: function (data) {                        
                            deferred.resolve(data);
                        },
                        error: function (e) {
                            console.log(':::error in flag:::', e);
                        },
                        beforeSend: function (xhr) {
                            xhr.setRequestHeader("Authorization", 'myapikey');                        
                        }
                    });

Here every time flag svg comes in different order. I want it to display it in an order of enum. And so I tried it with $.when().done(). But it's working as per my requirement.

How do I maintain order of appended svgs coming via ajax call ???

I don't need to replace the content. I need to append svgs one after another. — Valay, Aug 29 '14 at 08:50
Reread the duplicate. It is exactly the problem the duplicate is trying to solve. — Sumurai8, Aug 29 '14 at 10:17
I don't want to force synchronous ajax calls by async:false. — Valay, Aug 30 '14 at 05:40
Well, they are not in a defined order **because** they are asynchronous — Robert Longson, Aug 30 '14 at 06:02

score 1 · Answer 1 · edited May 23 '17 at 11:57

You can use async: false to mimic what you tried to do with Deferred. Since you know the order at the moment of calling your ajax requests, using placeholders as the duplicate question (for some reason they re-opened this...) suggests is your best bet.

function getAllTheFlags() {
  for( var i = 0; i < 5; i++ ) {
    insertPlaceHolder( i ); //inserts <div id="placeholder-i"></div> at desired location
    insertFlag( i );
  }
}

function insertFlag( i ) {
  $.ajax( { ... } ).success( function( data ) {
    var svgDiv = $(document.createElement("div"));
    $(svgDiv).addClass('svgDiv');

    var importedSVGRootElement = document.importNode(flag.documentElement, true);
    $(importedSVGRootElement).attr('viewBox', '0 0 100 125');
    svgDiv.append(importedSVGRootElement)

    $( '#placeholder-' + i ).replaceWith( svgDiv );
  } );
}

The function insertFlag(..) is mandatory, as you need to copy the value of i.

score 0 · Answer 2 · answered Aug 30 '14 at 10:11

You can not expect async ajax call to end in order of call. But you could wrap it in a function that takes the element as parameter that you can acces in your ajax callback.

function fetchContent(element, url){

    $.ajax({
        url: url,
        success: function(data) {
            element.whatever(...); 
        }
    });
}

In your code you then create a div or search for an existent one. And call your fetchContent by passing that element as a parameter. Even if your ajax calls don't end in the order of call the content should be added to the good element.

I think it should work.

jquery ajax - maintain ajax call sequence

2 Answers2