AJAX .done() returns before actual response is successful

Question

I have the following code that waits for an AJAX request to be completed/successful and then it will redirect to a different url.

Here's what my AJAX request looks like

 function UploadFile(contoller, File, RecordID, AuxID) {
    console.log("initialize uploading file: " + RecordID);
    const formData = new FormData();
    formData.append('RecordID', RecordID);
    formData.append('AuxID', AuxID);
    formData.append('File', File);

    return $.ajax({
        type: "POST",
        url: contoller,
        processData: false,
        contentType: false,
        cache: false,
        enctype: 'multipart/form-data',
        data: formData,
        dataType: 'json'
    })
}

I have another function that calls the AJAX request and redirects to a different url if the response is successful (ie: file has been uploaded to server successfully)

    UploadFile(controller,
               file,
               ID
              ).done(
                    // redirects to different url
              ).fail(
                    console.log("file failed to upload")
              );


            

However, I notice that .done() is always executed before the file has finished uploading to the server.

If I use the following code with "success" then it works well. The callback function after the success parameter is only called after the uploading process has been completed.

 $.ajax({
                    type: "POST",
                    url: controller,
                    processData: false,
                    contentType: false,
                    cache: false,
                    enctype: 'multipart/form-data',
                    data: formData,
                    success: () => {
                           // redirects to url
                        })
                    },
                    error: function (ret) {
                       
                    },
                    dataType: 'json'
                });

I read in other posts/documentation that the new jquery replaces "success" with ".done()" so they are basically the same thing, right? However, I'm not sure why .done() doesn't work for my code.

Answer 1

Both the done and fail need callback functions passed to them.

$.ajax returns a jqXHR object. This object contains the done and fail methods. From this documentation we have:

deferred.done( doneCallbacks [, doneCallbacks ] )

where:

doneCallbacks Type: Function() A function, or array of functions, that are called when the Deferred is resolved.

So an example would look like this:

$.get( "test.php" ).done(function() {
   alert( "$.get succeeded" );
 });