Ajax in loop callback method not working for every request

Question

Here I am using ajax each loop. but error in callback. The callback success or progress not working for each request. first, second call backs are collapsed.

entries.forEach(function (entry) {
    var request = $.ajax({
        type: "POST",
        url: 'base64upload',
        data: { 'value': base64, 'filename': entry.filename, 'zipname': zipName[0], 'fileCount': fileCount, 'image_title': entry.filename },
        cache: false,
        success: function (data) {
            $("#" + barid).css("width", "100%");
            complete++;
            console.log("success=" + barid);
        },
        progress: function (evt) {
            if (evt.lengthComputable) {
                $("#" + barid).css("width", parseInt((evt.loaded / evt.total * 100), 10) + "%");
                console.log("progress=" + barid);
            }
        }

    });

});

Answer 1

you can use ajax queue do this ,please see here for full documentation

$.ajaxq ("MyQueue", {
                    type: "POST",
                    url: 'base64upload',
                    data: {'value':base64, 'filename': entry.filename, 'zipname':zipName[0], 'fileCount': fileCount,'image_title':entry.filename},
                    cache:false,

                success: function(data)
                                        {
                     $("#"+barid).css("width","100%");
                     complete++;
                     console.log("success="+barid);

                                        },
                progress: function(evt) {
                    if (evt.lengthComputable) {
                       $("#"+barid).css("width",parseInt( (evt.loaded / evt.total * 100), 10) + "%");
                        console.log("progress="+barid);
                       }
                   }

                });

http://foliotek.github.io/AjaxQ/