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?

javascriptajaxsafariyui

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

Issue with PrimeFaces Gmap not displaying when using the UI include tag

Having trouble displaying a Google Map using Primefaces p:gmap within a ui:include component placed in a layout page. Currently using the latest versions of Primefaces, Mojarra, and Tomcat 8. This is the layout component where I am attempting to render th ...

ajaxgoogle-mapslayoutprimefacesrender

Ways to present information for selecting an option from an AJAX post response and displaying it in Laravel

Is there a reason why the information from ajax POST is not being displayed in the offerDropdown option? Although console.log(el.devc_name) displays correctly in the browser console. <form method="POST" name="formSellout" id=&quo ...

jqueryajaxlaravel

Using jQuery to display checkbox text even when it is not directly adjacent to the checkbox

I'm struggling to display the checked value text as shown in the image without any refresh or click. Can anyone offer assistance? This is my PHP dynamic form: <div class="products-row"> <?php $tq=$conn->query("select * from os_tiffen ...

javascriptphpjqueryajaxcheckbox

Can you explain the concept of cross domain and how JSONP fits into the picture?

As a beginner in .net programming, I have created a webservice where JavaScript calls the webservice in my code. I attempted to call it using my phone's browser while on the same network. It works perfectly with localhost, but when trying to call the ...

javascriptjsonweb-servicesjsonp

The access to the HTTP response object is not possible: the property is not found on the Object type

I recently created a response object and assigned it to the "this" object. However, when I try to access the datacentersinfo property, I encounter an error stating that the property does not exist on type Object. Due to this issue, I am unable to generat ...

javascriptangulartypescriptecmascript-6

Update the image within the svg tag

I am attempting to modify a preexisting SVG element within an HTML document. Here is the current code: <svg class="logo" viewBox="0 0 435 67"> <!-- IMAGE DIMENSIONS --> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#logo- ...

javascriptjqueryhtmlsvg

Function for swapping out the alert message

I am searching for a way to create my own custom alert without interfering with the rendering or state of components that are currently using the default window.alert(). Currently working with React 15.x. function injectDialogComponent(message: string){ ...

javascriptreactjs

Execute the Selenium function repeatedly using values from an array in a loop

I am facing a challenge with running a selenium script in a loop to populate a database. I have an array of objects consisting of 57 items that need to be processed through the loop asynchronously. My goal is to iterate through each store, check its status ...

javascriptselenium

Identification of input change on any input or select field within the current modal using JavaScript

My modal contains approximately 20 input and select fields that need to be filled out by the user. I want to implement a JavaScript function to quickly check if each field is empty when the user navigates away or makes changes. However, I don't want t ...

javascriptjquerybootstrap-modal

"Encountered a type error: The .join method is not recognized as a function

Hello everyone, I've encountered an issue that has me a bit stumped. I recently took over a project and found a problem in which the previous developer was attempting to join an array of strings. Unfortunately, when I try to build the project, I keep ...

javascriptreactjsnetlify

Enabling or disabling a button dynamically in Ionic based on a conditional statement

I am looking to dynamically enable or disable buttons based on specific conditions. The data is retrieved from Firebase, and depending on the data, I will either enable or disable the button. For example, if a user passes the First Quiz, I want to enable ...

javascripttypescriptif-statementionic-framework

Utilizing Mysql Joins with parameterized queries in Node.js: A Comprehensive Guide

Currently, I am utilizing Node.js and Express.js for my project. In particular, I am incorporating the "mysql2 library" into my development process. My current task involves concatenating and joining queries with parameters in a secure manner. How can I ...

javascriptnode.jsexpressnode-mysql

Issue with AngularJs: $http post only posting single item to collection inside a for loop

I have a collection that requires me to post multiple items in a for loop. Below is the code snippet: for(i = 0; i < 28; i++) { var request = $http({ method: "post", url: "/students", ...

javascriptangularjshttppost

Exiting a void method in JavaScript/Typescript using the return or break statement

I find myself dealing with a complex method in Typescript that contains multiple if else if else constructs. It's a void method, and I'm wondering how I can exit the method based on a specific if condition without having to execute the remaining ...

javascripttypescript

Having difficulty maintaining trailing zeroes in decimals after converting to float in Angular

I need assistance with converting a string to float in Angular. Whenever I use parseFloat, it seems to remove the zeros from the decimal values. How can I ensure that these zeros are retained with the numerical values? The example below should provide more ...

javascriptangulartypescript

arrange elements by their relationship with parents and children using typescript and angular

Here is a list that needs to be sorted by parent and child relationships: 0: {id: 7, name: "333", code: "333", type: 3, hasParent: true, parentId: 4} 1: {id: 6, name: "dfgdfg", code: "dfgdfg", type: 3, hasParent: false, parentId: null} 2: {id: 5, name: ...

javascriptangulartypescript

Issues with ng-show functionality occurring during the initialization of the webpage

While working on a webpage using HTML, CSS, and Angular.js, I encountered an issue where the page content would not display properly upon loading. The objective was to show selected content based on user choices from a dropdown menu. Although the filtering ...

javascriptjqueryhtmlangularjs

Rock and Roll 3: Retrieving information with Ajax in a form

I've been searching for solutions that are almost there, but they either work with Rail 2.x and not in version 3, or they require so many adjustments that I end up spending a lot of time trying to make them work. Here's what I'm aiming to a ...

ruby-on-railsajaxforms

Is it possible for me to alter the script for my button's onclick

Is there a way to replicate all properties of a div when creating a clone using JavaScript code? I have an existing script that successfully creates a clone of a div when a button is pressed, but it does not copy the CSS properties. How can I ensure that t ...

javascriptjqueryhtmlcss

Using the Grails asset-pipeline with an external JavaScript library

In transitioning from Grails 2 to Grails 3, I am facing the challenge of managing my JavaScript files with the asset-pipeline plugin. The issue lies in using external libraries such as globalize and ajax-solr, which are large and consist of multiple interd ...

javascriptjquerygrailsasset-pipeline