Freezing in IE/Safari due to AJAX jQuery interactions

Feeling frustrated and seeking help.

I am currently executing this particular script:

<script type="text/javascript" charset="utf-8>
    jQuery(window).ready(function(){
        //alert('running');
        var sold = false;

        var leads = [            
            ["one", 120],

            ["two", 0]
        ];

            jQuery.each(leads, function(index, value) {
                var _data = "";
                jQuery.ajax({
                    url: "/wp-content/plugins/cUrl/submit_lead.php?lead=" + value[0],
                    dataType: "json",
                    //contentType: "application/json; charset=utf-8",
                    timeout: value[1] * 1000, //Yes i need to wait 120 seconds for "one"
                    async: false,
                    cache: false
                }).success(function(data) {
                    _data = data;
                    console.log(data.status + " Lead: "+ value[0]);
                    if (data.status == "sold") {
                        sold = true;
                        jQuery.ajax({
                            url: "/wp-content/plugins/cUrl/submit_lead.php?resetSession",
                            dataType: "json",
                            //contentType: "application/json; charset=utf-8",
                            async: false,
                            cache: false
                        }).success(function() {
                            //Silence is golden.
                        });
                        window.location.href = data.link;
                    }
                }).error(function(jqXHR, textStatus){
                    console.log("ERROR: " + textStatus + " Lead: " + value[0]);
                });

                if (_data.status == "sold") {
                    return false;
                }
            });

            if (!sold) {
                //If we get here, None of the leads were sold.
                jQuery.ajax({
                    url: "/wp-content/plugins/cUrl/submit_lead.php?resetSession",
                    //contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    async: false,
                    cache: false
                }).success(function(data) {
                  //Silence is golden.
                });
                window.location.href = '/thank-you.php';
            }        

    });
</script>

This specific script collects information and submits it to submit_lead.php. The response will include a status, a message, and a link. Once the link is received, the script should call the same script with ?resetSession and then redirect the user to the obtained link.

I disabled synchronous calls because I require a response from "one" before moving on to "two". If a link is received for one lead, there is no need to proceed to the next lead.

When running the script in Firefox or Chrome, everything works smoothly with animations indicating progress as requests are processed. However, in IE8 or Safari, the page partially loads and remains static until the ajax response is received, after which it suddenly springs into action and redirects.

I have experimented with using `window.ready` and `document.ready`, but without success.

Any advice or suggestions would be greatly appreciated.

Thank you for taking the time to read this.

Answer №1

As mentioned earlier in the feedback, re-enable async functionality.

Incorporate your redirect or other desired actions within the ajax function's callback to avoid encountering locking issues.

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

Changing buffer from base64 to UTF-8 encoding in Node.js

My application imports messages from the Notes folder of Gmail using the imap npm module. When following the example on their GitHub page, all message contents are read into a buffer: stream.on('data', function(chunk) { count += chunk.len ...

Ways to retrieve interface definition using a variable

I have an interface that organizes various states together export interface ScanFiltersStatePage1 { keywords: SensitiveInfoFileKeywordFilter categories: string[] classifications: string[] fileTypes: string[] infotypes: string[] regulations: str ...

Issues with Laravel app's ability to process multiple requests simultaneously

I have encountered a challenge while developing a Laravel web application that involves running long queries and utilizing various APIs. Despite sending AJAX requests simultaneously, the server does not handle them concurrently. Let me illustrate my issue ...

By default, the sidebar is open on desktop devices while closed on mobile devices

I am struggling to figure out how to set my sidebar/navigation content, using Bootstrap, to be expanded by default on desktop and closed by default on mobile with the icon only showing on mobile devices. Despite multiple attempts, I cannot seem to make thi ...

Troubleshooting a misformatted JSON string that lacks proper double quotes in Java Script

{ DataError: { user_id: [ [Object] ] } } I want to transform this string into JSON structure like below: { "DataError": { "user_id": [ [Object] ] } } Is there a potential method to achieve this outcome from incorrectly formatted JSON string? ...

Having trouble formatting JSON data in a jQuery datatable with accurate information

Currently, I am diving into the world of jQuery tables specifically for a report that I am working on. Despite successfully receiving the API response, I am facing challenges in binding it to the jQuery datatable. I have searched through various questions ...

Implementing a sibling combinator technique within Material UI's useStyles framework

Is there a way to change the background of one div when hovering over another using material ui? The traditional CSS method is: #a:hover ~ #b { background: #ccc; } Here is my attempt with Material UI: const useStyles = makeStyles(theme => ({ ...

The international telephone input library's "grunt img" command is malfunctioning

I am currently utilizing intl-tel-input to develop a control for displaying mobile numbers. Since the flags are quite small, I am in need of enlarging them. A reference for this can be found here: https://codepen.io/jackocnr/full/ONXWgQ To achieve this, ...

Unable to pass an Array to the Controller

let formData = new FormData(); payloadData = JSON.stringify(payload.unitDoctors); for (var prop in payloadData) { formData.append(prop, payloadData[prop]); } axios({ method: "put", url: apiUrl + payload.id, data: formData }) .then(resp ...

Having some trouble creating a ping command in discord.js that displays latency; encountered this error message

I encountered an issue while trying to create a ping command that displays latency. I am unsure why this error is showing up, here is the specific error message - TypeError: Cannot read properties of undefined (reading 'ping') at Object.execu ...

Connecting the v-model in a Vue.js child component to update the parent value

I've encountered an issue with a vue component where I'm trying to link a text input in the child template to a variable in the parent using v-model, but it doesn't seem to be working. How can I make this work? Currently, I am using Vue.js ...

Animating pseudo-elements using Jquery

I'm having trouble animating the :after pseudo-element of my ul. Below is the CSS code I have: #slider .mypagination ul::after { content: ""; width:25%; bottom: 0; left:0; position: absolute; border-top:1px solid #7accc8; ...

Using React.PureComponent, the list component efficiently renders each item with optimized performance

We've developed a reusable list component in ReactJS. To address performance concerns, we decided to incorporate the shouldComponentUpdate method to dictate when our list component should re-render. public shouldComponentUpdate(nextProps: TreeItemInt ...

Encountering a 404 error while trying to use the autolinker

I have been struggling with this issue for the past day and can't seem to solve it on my own. Essentially, I am attempting to use Autolinker.js to automatically convert URLs into clickable hyperlinks in my chat application. However, every time I try ...

What are the advantages of utilizing the HttpParams object for integrating query parameters into angular requests?

After exploring different ways to include query parameters in HTTP requests using Angular, I found two methods but struggled to determine which one would be the most suitable for my application. Option 1 involves appending the query parameters directly to ...

Retrieving additional links on a webpage by making JSON requests using Python

As I extract links from a specific box with infinite scroll on a website, I am utilizing the following code to send requests for obtaining the next set of 10 links: import requests from bs4 import BeautifulSoup import urllib2 import urllib import extracti ...

Combine numerous JSON files into a single JSON file

I have numerous JSON files that look like this: For example: 1.json {"name": "one", "description": "testDescription...", "comment": ""} test.json {"name": "test", "description": "testDescription...", "comment": ""} two.json {"name": "two", "descript ...

Having trouble with your Java AJAX autocomplete feature? It seems to

I am encountering an issue with the Ajax auto complete feature on my website. After debugging the code, I discovered that there seems to be a problem in my controller where the json line is written. I am fairly new to this and would greatly appreciate some ...

extracting numerical values from a string using javascript

Currently, I am engaged in a project that requires extracting phone numbers from a string. The string is stored in a JavaScript array called dine. { "group": 1, "tel1": "Tél(1): 05.82.77.31.78", "tel2": "Tél(2): 09.55.86.31.45", }, ,... My goal i ...

Styling GeoJSON data in the React Leaflet mapping library can greatly enhance the

I successfully incorporated the leaflet map library into my react project. You can check it out here. I also created a geojson map component as shown below: class MapContainer extends React.Component { state = { greenIcon: { lat: 8.3114, ...