Issue with XMLHttpRequest.send() not working in Google Chrome when using POST requests

I'm currently developing an application where users can send files using a form through a POST request. As the file uploads, the application makes multiple GET requests to gather information about the upload progress.

Interestingly, this functionality works perfectly in Internet Explorer and Firefox, but encounters issues in Chrome and Safari.

The main problem lies in the fact that even though the XMLHttpRequest object's send() method is called, no actual requests are being made as revealed by inspecting with Fiddler.

To elaborate further, there is an event listener added to the "submit" event of the form which triggers a timeout function on the window:

window.setTimeout(startPolling, 10);

This startPolling function initiates a sequence that continuously sends GET requests to a web service for status updates in text/json format that update the user interface accordingly.

Could this issue be due to limitations or security measures specific to WebKit-based browsers? Could it possibly be a bug in Chrome? (Similar behavior is observed in Safari as well).

javascriptajaxgoogle-chrome

Answer №1

I am encountering the same issue. Currently, I am using an iframe within the form to ensure that xhr requests are executed during the posting process. While this method works, it lacks graceful degradation for situations where JavaScript is disabled (as I couldn't load the next page outside the iframe without JS). If anyone has a more elegant solution, I would greatly appreciate hearing about it.

Below is the jQuery script used as reference:

$(function() {
$('form[enctype=multipart/form-data]').submit(function(){ 
    // Prevent multiple submits
    if ($.data(this, 'submitted')) return false;

    var freq = 500; // frequency of update in ms
    var progress_url = '{% url checker_progress %}'; // ajax view serving progress info 

    $("#progressbar").progressbar({
        value: 0
    });

    $("#progress").overlay({ 
        top: 272, 
        api: true,
        closeOnClick: false,
        closeOnEsc: false, 
        expose: { 
            color: '#333', 
            loadSpeed: 1000, 
            opacity: 0.9 
        }, 
    }).load();

    // Update progress bar
    function update_progress_info() {
        $.getJSON(progress_url, {}, function(data, status){ 
            if (data) {
                var progresse = parseInt(data.progress);
                $('#progressbar div').animate({width: progresse + '%' },{ queue:'false', duration:500, easing:"swing" }); 
            }
            window.setTimeout(update_progress_info, freq);
        });
    };
    window.setTimeout(update_progress_info, freq);

    $.data(this, 'submitted', true); // mark form as submitted.
});
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using NodeJS to generate a multipart/mixed response

I am faced with a particular situation: creating a multipart/mixed response in NodeJS with full control over the communication on both ends to avoid interoperability issues. A JSON file containing a list of nodes describing each ZIP file, for example: [{ ...

javascriptjsonnode.jsmultipartform-data

How to update icon for fa-play using Javascript in HTML5

I recently added an autoplay audio feature to my website. I would like to implement the functionality to pause and play the music, while also toggling the icon to fa-play at the same time. This is the HTML code I am using: <script type="text/javascri ...

javascripthtml

Troubleshooting Sequelize Query Problems and PUT Errors on Google Chrome

STUDENT QUERY! I'm currently delving into the world of Node.js/Express and MySQL databases with the help of Sequelize ORM. Typically, in our basic applications, we use Sequelize to query a MySQL database and then utilize res.redirect('/') w ...

node.jsajaxexpresssequelize.js

Sometimes, Express may return the message "not found" on and off

After working with express for many years, I find myself a bit out of practice with TypeScript - and it seems like my eyesight is failing me! This is the first time I've encountered this issue, so I must be missing something... My current dilemma is ...

javascripttypescriptexpresscloud-foundryexpress-router

There is an abundance of brief PHP documents

After conducting some initial research, I have realized that I need more information on the topic at hand. My interactive website relies on ajax calls to retrieve data from the server. Authenticated users engage with this data through various actions, whic ...

javascriptphpmysqlajaxdatabase

The callback function fails to remove the JQuery row from the table

I am facing an issue with deleting a dynamically created row from a grid in my project. I use jQuery to send an Ajax request to the server to delete the corresponding data from the database. If the deletion is successful, I want to remove the row from th ...

jqueryajax

Clicking will cause my background content to blur

Is there a way to implement a menu button that, when clicked, reveals a menu with blurred content in the background? And when clicked again, the content returns to normal? Here's the current HTML structure: <div class="menu"> <div class=" ...

javascriptjqueryhtmlcss

Creating a new line in the content of a MatDialog in Angular 7

I have a situation where I am using MatDialog and attempting to insert a new line in the content definition. I've tried using both \n and </b>, but neither of them seem to work. Is there an alternative way to achieve this without manually e ...

javascriptangularangular-material

Having trouble getting the Bootstrap modal form to submit when using Knockout's submit binding?

Check out my jsFiddle example by clicking here. I am currently working on a form within a bootstrap modal. The problem I'm facing is that the knockout submit binding doesn't get executed unless the user clicks on the submit input. It seems like ...

javascripttwitter-bootstrapmvvmknockout.js

Ways to store information using VueJS lifecycle hooks

I am currently working on setting a data property using the created lifecycle hook within my component. The issue I'm encountering is receiving a "TypeError: Cannot read property 'summary' of undefined" in the console as I run the code. This ...

javascriptvue.jsvuejs2vue-component

What is the most effective method for implementing a fallback image in NextJS?

Lately, I've been immersed in a NextJS project that involves utilizing the YoutubeAPI to retrieve video details, such as thumbnail URLs. When it comes to fetching a full resolution image, the thumbnail URL typically follows this format: https://i.yti ...

javascriptreactjsnext.jsyoutube-apinextjs-image

Troubleshooting Vue and Laravel API CRUD: Issue with updating data

I am currently working on building a simple CRUD application using Laravel 9 and Vue js 3. However, I have encountered an issue where the method does not seem to be functioning correctly. The update method from the Laravel API works perfectly fine (I test ...

javascriptphplaravelvue.js

Error encountered while using the Fetch API: SyntaxError - the JSON data contains an unexpected character at the beginning

I've been troubleshooting a contact form and there seems to be an error causing it to malfunction. It's strange because when I switch from Fetch to XMLHttpRequest, the code works fine. With Fetch, if I don't request a response, no errors ar ...

javascriptreactjsfetchphpmailer

Verify if the screen is in full view by monitoring document.fullscreenElement within Vue3

Is there a way to determine when the document is in fullscreen mode? I attempted to monitor document.fullscreen with the following code, but it was not successful: watch(document.fullscreenElement, (newValue) => { fullScreenActivated.value = newValue ...

javascriptvue.jsvuejs3

Use vanilla JavaScript to send an AJAX request to a Django view

I'm attempting to make a GET AJAX request to a Django view using vanilla JS. Despite passing is_ajax(), I am having trouble properly retrieving the request object. Below is my JavaScript code. Whether with or without JSON.stringify(data), it does not ...

javascriptdjangoajax

Using NodeJS and Express together with Ajax techniques

I am currently developing a web application that utilizes Ajax to submit a file along with some form fields. One unique aspect of my form is that it allows for dynamic input, meaning users can add multiple rows with the same value. Additionally, the form i ...

javascriptjqueryajaxnode.jsexpress

Step-by-step guide on populating an array with variables in Vue.Js for creating a bar chart

I am attempting to dynamically add values from variables to an array in order to create a bar chart using Vue.js My initial attempt involved adding values like this: series[0]=ServiceArea1;. This is my current progress: barChart: { data: { s ...

javascriptvue.js

Can the dropbox option be automatically updated when input is entered in another text field?

I'm working on a form with a dropdown containing category names and a text field for entering the category code. What I need is for selecting a category name from the dropdown to automatically display the corresponding category code in the text field, ...

javascriptjqueryruby-on-railsrubyajax

The type 'number[]' is lacking the properties 0, 1, 2, and 3 found in the type '[number, number, number, number]'

type spacing = [number, number, number, number] interface ISpacingProps { defaultValue?: spacing className?: string disabled?: boolean min?: number max?: number onChange?: (value: number | string) => void } interface IFieldState { value: ...

javascriptreactjstypescript

Unable to administer AuthenticationController

I am attempting to inject a controller into my app.run function, but I keep encountering the following error: Uncaught Error: [$injector:unpr] http://errors.angularjs.org/1.2.10/$injector/unpr?p0=AuthenticationControllerProvider%20%3C-%20AuthenticationCon ...

javascriptangularjsdependency-injection