CODEWITHSUNDEEP
jqueryajax
developer_sora
developer_sora

Reputation: 43

AJAX .done() returns before actual response is successful

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.

Upvotes: 0

Views: 951

Answers (2)

Gerhard Liebenberg
Gerhard Liebenberg

Reputation: 444

It is possible in some scenarios for the callback function (passed to .done()) to be invoked before the server responded (typically when you send identical requests in quick succession). This can happen if jQuery returns a previously cached response.

Just add the cache:false parameter:

$.ajax({
    type: "GET",
    cache: false,

Upvotes: -1

Rich Wagenknecht
Rich Wagenknecht

Reputation: 712

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" );
 });

Upvotes: 1

Related Questions