Question

I have a JavaScript application that works like this:

• Uploads a file, receives the uploaded file ID as a response
  This is done using the BlueImp uploader
• Uses the file ID to refer to the file in subsequent requests, in this case to receive a preview of the uploaded file.

This is the code for the file upload ‘complete’ handler. It’s originally written in Coffee Script (http://pastebin.com/708Cf9tu).

var completeHandler = function(e, data) {
    var url;
    if (data.textStatus !== 'success') {
        alert("Noe gikk galt. Debug informasjon er logget i konsollen");
        console.group('Upload failure');
        console.error(data.textStatus);
        console.error(data.result);
        console.groupEnd('Upload failure');
        selectButton.removeClass('disabled');
        uploadButton.removeClass('disabled loading');
        uploadButton.html('Last opp');
        return;
    }
    self.fileUploadResponse = data.result;
    url = "" + config.api_root + "/" + config.api_path_tabulardatafilepreview;
    return $.ajax(url, {
        type: 'POST',
        dataType: 'json',
        async: false,
        data: {
            'file_handle': data.result.file_handle,
            'rownum': 5
        },
        complete: function(req, text_status) {
            if (text_status !== 'success') {
                alert("Noe gikk galt. Debug informasjon er logget " + "i konsollen");
                console.group('Failed to receive data file preview');
                console.log(text_status);
                console.log(req.responseText);
                console.log(req);
                console.groupEnd('Failed to receive data file preview');
                selectButton.removeClass('disabled');
                uploadButton.removeClass('disabled loading');
                uploadButton.html('Last opp');
            }
            self.previewData = JSON.parse(req.responseText);
            return self.setStage(2);
        }
    });
};

This works brilliantly in FireFox, but in Chrome I just started to get an error in the second jQuery Ajax request. It now returns with status “error”, with no responseText and with statusText set to “Error: NETWORK_ERR: XMLHttpRequest Exception 101”. Though this doesn’t happen in all cases. The uploaded file doesn’t seem to have anything to do with the issue, because a 10KB csv file works, a 120KB xlsx file fails but a 1.2MB xlsx works. Additionally it’s the second Ajax request that fails, and it doesn’t do anything but send two small integers to the server. Why does that fail!?

Also this just started happening today. I haven’t changed anything that I know of, and I have not updated Chrome.

Does anyone have a clue as to why Chrome is doing this? Can it have anything to do with an Ajax request being launched in the complete handler of a previous Ajax request?

Thanks for any guesses that can help me solve this

Answer 1

Turns out it’s a bad idea to start lengthy processes inside Ajax event handlers. In my case, starting a new synchronous Ajax request in the event handler was the mistake. I have since made both requests asynchronous and separated the code into neat functions, and I’m no longer bothered by the exception.