pass additional parameters to jQuery's $.ajax() xhr callback

Question

I'm doing this and it works splendidly

$.ajax({
    url : 'php/upload.php',
    xhr: function(){
        var xhr = new XMLHttpRequest();
        xhr.upload.addEventListener("progress", function (e) {
            $('#upload-progress-bar-1').animate({        
                'width': (Math.round(e.loaded / e.total) * 100) + '%'}, 400);
            }, false);
            return xhr;    
        },
        data : this.formData,
        type : 'POST',
        processData: false,
        contentType: false,
        dataType: "json",
        success : function(data) {
            //$('#upload-progress-bar-1').css('width', '100%');
        }
    });

The problem is that $('#upload-progress-bar-1') will be dynamic, but I can't figure out how to pass a parameter into the xhr: callback function.

Anyone know of a way of doing this?

You can't provide any parameter to that function. You would need to declare a variable within scope of the `$.ajax` request and retrieve it within the `xhr` property. — Rory McCrossan, Jun 10 '16 at 20:49
so if I add the id to the form data, like `this.formData.append('progressBarID', this.progressBarID);` could I retrieve it inside the xhr callback somehow? like `xhr.get('progressBarID')`? — user2287474, Jun 10 '16 at 20:58
Define a global variable and update its value before `ajax` is occurred. then inside your call back function you can get it. — Matin Kajabadi, Jun 10 '16 at 21:00
use a local variable in the function that's calling `$.ajax`. It will be captured in the closure. — Barmar, Jun 10 '16 at 21:00
@Matt.kaaj It should be a local variable, not a global variable. — Barmar, Jun 10 '16 at 21:00
@Barmar Can you explain why ? to be not accessible from outer scope ? — Matin Kajabadi, Jun 10 '16 at 21:03
@Matt.kaaj http://stackoverflow.com/questions/2613310/ive-heard-global-variables-are-bad-what-alternative-solution-should-i-use — Rory McCrossan, Jun 10 '16 at 21:03
@Matt.kaaj If you use a global variable, it will be overwritten every time you call the function that makes the AJAX call. A local variable allows each AJAX call to have a different value because it will be saved in the closure. — Barmar, Jun 10 '16 at 21:05
@Matt.kaaj It makes a difference if you have more than one upload going at the same time. If you use a global variable, they'll all update the same progress bar. — Barmar, Jun 10 '16 at 21:06

score 0 · Accepted Answer · answered Jun 10 '16 at 21:03

Use a local variable, and reference it in the callback.

var target = $("#upload-progress-bar-1");
$.ajax({
    url : 'php/upload.php',
    xhr: function(){
        var xhr = new XMLHttpRequest();
        xhr.upload.addEventListener("progress", function (e) {
            target.animate({        
                'width': (Math.round(e.loaded / e.total) * 100) + '%'}, 400);
        }, false);
        return xhr;    
    },
    data : this.formData,
    type : 'POST',
    processData: false,
    contentType: false,
    dataType: "json",
    success : function(data) {
        target.css('width', '100%');
    }
});

This makes sense. Thank you!! – user2287474 Jun 11 '16 at 16:56 — user2287474, Jun 11 '16 at 16:56

pass additional parameters to jQuery's $.ajax() xhr callback

1 Answers1