Is it true that Safari restricts AJAX Requests following a form submission?

I've developed a JavaScript-based upload progress meter that utilizes the standard multipart submit method instead of submitting files in an iframe. The process involves sending AJAX requests during submission to retrieve the percentage complete of the upload and updating the progress meter accordingly.

Everything runs smoothly in FireFox & IE, but there seems to be an issue with Safari. For some reason, Safari halts AJAX requests after the main form has been submitted. Even though I can see the request headers in the debugger, it seems like the response is never received.

Has anyone else encountered this problem or found a solution?

Answer №1

Indeed, the behavior of Safari and other WebKit-based browsers like Google Chrome can be a bit tricky to handle. I recently encountered a similar issue while working on a file upload progress meter. To address it, I implemented a technique that I found at http://example.com/upload-progress-safari-support. Although I didn't adopt the exact styling used in the example, I was able to make the AJAX functionality work seamlessly. The key is to create a hidden iframe specifically for Safari, where you load jQuery and your AJAX script. Then, when the form is submitted, the main frame calls a function within the iframe. This approach allows for smooth operation in Safari without affecting the performance in other browsers.

Answer №2

This particular issue is a known bug in WebKit. For more details, please visit this link

Answer №3

Have you considered using an iframe to submit your form? It seems that once the form is submitted, the page goes into a mode where further changes to the DOM are restricted.

Take a look at a tutorial like this one for additional insights.

Answer №4

The way this is working actually makes sense to me - I find it odd that Firefox and IE would act differently.

It's like trying to walk away from a conversation and the other person keeps talking to you - kind of cheeky!

I understand the potential advantages of this, but ideally it should only happen if you are making a POST request to the current URI or at least on the same domain.

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

Issues with Bootstrap Contact Form submission

I found a helpful tutorial for creating a form at the following link: After following the tutorial, I added these scripts to the bottom of my contact form HTML: <script src='https://code.jquery.com/jquery-1.12.0.min.js'></script> ...

javascript php html twitter-bootstrap express

What is the best way to transform object request data into a string in an Express application using Node.js

I am trying to save the request data from app.get('/') to a variable, but I keep getting an error "TypeError: Converting circular structure to JSON". var express = require('express') var app = express() var bodyParser = require('b ...

javascript json node.js express object

Upgrading the entire document's content using jQuery

I am dealing with an ajax response that provides the complete HTML structure of a webpage, as shown below: <!DOCTYPE> <html> <head>  </head> <body>  </b ...

javascript jquery ajax

Clearing cookies in Express.js can be a challenging task

I've tried multiple options, but I can't seem to delete the cookie. Can anyone help me understand this? I have attempted using set maxage, expires, setheaders, but nothing seems to delete the cookie. It's impossible. res.cookie("refres ...

javascript node.js express

What is the best way to create an AngularJS page with a direct link that will dynamically affect the content on the

I have a webpage similar to Google search where the backend generates a list of items. The page features an HTML form with multiple fields for users to modify values, resulting in a refreshed list of items from the backend. Currently, users can create a ...

javascript angularjs location-provider

No longer able to bind events after making changes to SVG elements [using JSFiddle]

I've coded a personalized directive to display tags like `<rect>` and `<circle>` within `<svg>` elements. My shapes model is simply an array of objects with different attributes such as `width`, `height`, and `stroke-width. These s ...

javascript angularjs svg angularjs-directive angularjs-scope

Exporting stylesheets in React allows developers to separate

I am trying to figure out how to create an external stylesheet using MaterialUI's 'makeStyles' and 'createStyles', similar to what can be done in React Native. I'm not sure where to start with this. export const useStyles = m ...

javascript reactjs typescript react-native material-ui

Utilizing Javascript and CSS for horizontal alignment from left to right

I have a JavaScript function that generates a list of store locations and creates a DIV beneath the map. Currently, the items are displayed top to bottom on the page. However, I would like to change the layout so that the items are shown as 3 in a row fro ...

javascript css

Explore the wonders of Jest and Playwright by heading over to youtube.com and discovering an exciting video!

As part of my job responsibilities, I have been tasked with automating tests for a web application that our team developed. Using Playwright and Jest, I am required to write automation scripts from scratch. To practice utilizing Playwright, I decided to cr ...

javascript node.js jestjs webautomation playwright

Recently added classes are not exhibiting the same behavior as the ones loaded during DOM ready

I have implemented a jQuery plugin called timeago.js to display the time a particular article was posted, for example, showing 2 minutes ago. HTML: <p> Articles <span class='post-time' title='2014-12-03 13:42'></span> ...

javascript jquery ajax

Tips for creating image hover effects on jcarousel

I have successfully implemented Jcarousel from and it's functioning perfectly. Is there a way to create a rollover effect for the images when hovering over them with the mouse? What JavaScript code should be used for this, and where should it be impl ...

javascript jquery ajax jcarousel

Using JavaScript to access a button from a dropdown list in ASP.NET MVC

I'm trying to use a JavaScript function to trigger the click event of an HTML button when a drop-down list is changed. However, it seems like the correct id is not being found. @using (Ajax.BeginForm("GetReport", "Choices", new AjaxOptions() { ...

javascript jquery html asp.net asp.net-mvc

I am interested in monitoring for any alterations to the @input Object

I've been attempting to detect any changes on the 'draft' Object within the parent component, however ngOnChange() does not seem to be triggering. I have included my code below, but it doesn't even reach the debugger: @Input() draft: ...

javascript angular typescript ecmascript-6

Steps to display a variable in JavaScript on an HTML textarea

I'm working on a JavaScript variable called 'signature' var signature; //(Data is here) document.write(signature) Within my HTML document, I have the following: <div id="siggen"> <textarea id="content" cols="80" rows="10">& ...

javascript jquery html css ajax

Building a conditional statement in React based on the URL path: A beginner's guide

I want to incorporate a transparent menu specifically on the homepage. How should I go about this? I've established a constant named isHomePage and now I need to set a URL (the index.tsx) to define this constant. function MyApp({ Component, pageProps ...

javascript reactjs next.js

Conceal virtual keyboard on mobile when in autocomplete box focus

I would like the keyboard to remain hidden when the autocomplete box is focused or clicked, and only appear when I start typing. The code below currently hides the keyboard when any alphabets or numbers are pressed. However, I want the keyboard to be hidd ...

javascript reactjs mobile material-ui autocomplete

ever-evolving background-image with dynamic CSS styling

Being new to both PHP and Javascript, please excuse any mistakes in my explanation. I have information stored in a PHP array that I bring to my index page using the function below (located in a separate file called articles.php that is included in my index ...

php javascript html css background-image

Retrieve the current element's 'this' object even after binding an external 'this' object

Is the title of this question confusing? Let's dive in. Imagine you have something like this: var Test = function(){ this.foo = a; } Test.prototype.init = function() { $(document).on('change', '.form-control', this.myFun ...

javascript jquery object prototype

Issues with updating permissions for Microsoft Azure Containers using AJAX

My goal is to dynamically set permissions for an Azure Container by allowing users to select the desired permissions through checkboxes. I then plan to send the form data to my controller using an Ajax call. In my method public JsonResult GenerateSasWithP ...

c#ajax azure

Calculating the number of days between two given dates, including both the start and end dates

I need to calculate the number of days between two dates, including both of the dates. My current method for this task is as follows: numDaysBetweenDates(startDate, endDate) { let millisecondsPerDay = 24 * 60 * 60 * 1000; return (endDate - startDate) ...

javascript angular date

JavaScripter Q&A