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

What is the best way to trigger the ajax request with the same post parameter upon pressing the browser's back button?

Is there a way to remember the post parameters and resend an AJAX request when the browser back button is pressed? I have searched online and found a couple of methods: Using localsotrage or document.location.hash when the page unloads. Using cookie ...

Typescript polymorphism allows for the ability to create various

Take a look at the following code snippet: class Salutation { message: string; constructor(text: string) { this.message = text; } greet() { return "Bonjour, " + this.message; } } class Greetings extends Salutation { ...

Error: Scheme is not a valid function call

Currently, I am attempting to implement user registration functionality in a Node.js application using MongoDB. However, I encountered this error: var UtenteSchema = Scheme({ TypeError: Scheme is not a function Below is my model utente.js: cons ...

How to dynamically display a div in Vue.js depending on the attributes of another element

I have a dilemma with my text container. My goal is to collapse the div if the text length exceeds a certain limit, and then display a button that says "...show more". When this button is clicked, the div should expand. Clicking it again should collapse th ...

The useEffect() method used without any cleanup function

It is mentioned that, "Every time our component renders, the effect is triggered, resulting in another event listener being added. With repeated clicks and re-renders, numerous event listeners are attached to the DOM! It is crucial to clean up after oursel ...

Creating a chart with multiple series in canvas js through looping

I'm currently working on creating a multi-series chart using Canvasjs. I've encountered an issue where I can't include a loop inside the dataPoints and have had to manually code everything. Is there a way to utilize for loops in this scenari ...

Toggle the active class on the parent element when it is clicked

I'm encountering a problem with my JavaScript - attempting to make this function properly. Firstly, here is the desired functionality: 1.) Add or remove the 'active' class from the parent element when clicked 2.) When clicking inside the ...

Mastering AngularJS Charts: Successfully Loading External JSON Data without Errors

Greetings! Allow me to apologize for what might seem like a basic question. I've recently delved into the realm of java, JSON, and all that jazz, and it's rather uncharted territory for me. I've scoured high and low but simply can't pin ...

React does not allow _id to be used as a unique key

When I retrieve the categories from my allProducts array fetched from the database using redux-toolkit, I filter and then slice the array for pagination before mapping over it. However, I keep encountering a warning: Each child in a list should have a un ...

Learn the process of dynamically wrapping component content with HTML tags in Vue.js

Hey there! I'm looking to enclose the content of a component with a specific HTML tag, let's say button for this scenario. I have a function that dynamically returns a value which I use as a prop. Based on that, I want to wrap the component&apos ...

Keeping track of important dates is ineffective using the calendar

I am facing an issue with developing a calendar that marks events on the correct dates. I am receiving the dates in the following format in PHP [ { "status": "OK", "statusCode": 200, "statusMensagem": & ...

Unable to retrieve iFrame window due to an error

My challenge lies in obtaining the window of an iFrame using this particular code: var frameWindow = document.getElementById("loginframe"); var iWindow = frameWindow.contentWindow; However, I am consistently encountering this error message: Property ...

Switching the delimiter for JSON queries using Json.net

Currently, I am utilizing the Newtonsoft Json library to query a JSON string by employing the SelectToken method, which utilizes "." as a delimiter to navigate through the JSON hierarchy in accordance with the documentation provided here: https://www.newt ...

React-Troubleshooting list items and keys: A comprehensive guide to resolving common issues

I'm facing a challenge with generating unique key ID's for my list items. Even though I thought I had a good understanding of how unique keys function, it seems that I am mistaken. In the code snippet below, using key={index} or key={item} is no ...

Step-by-step guide on showcasing AJAX outcome within a table row

I am facing an issue with my AJAX process while trying to display the current value inserted in a new row of a table after successfully adding it to the database. I am unable to figure out how to echo or display the values. Immediate assistance is needed t ...

Refreshing the Dropdown Menu with Jquery

Looking for a way to create a reusable dropdown menu using css/jquery? Check out this codepen: https://codepen.io/anon/pen/NxXXPg Is there a method to reset the 'active' status when clicking on a blank space or another html element? Here's ...

Unable to assign a value to a property within a JavaScript object

I'm attempting to configure settings for a JavaScript object (my assumption is that it's not a plain JS Object, but possibly an instance of a specific class, though I haven't been able to identify the class). Here's how the object appe ...

What is the best way to eliminate a trailing backslash from a string?

Currently, I am iterating through a list of Discord server names in node.js. The goal is to create a php file that contains an array structured like this: <?php $guildLookup = array( "164930842483761" => "guildName1", "56334 ...

Guide to converting raw Mysql fields into objects using Node.js

I have written a code to retrieve all the rows from the article table in MySQL, but I would like to represent this data in object and array format so that I can send it to endpoints. app.get('/article' , function(req , res){ var connec ...

"Bringing in" ES6 for Node

I am interested in utilizing import from ES6 instead of require from common.js in Node. Surprisingly, I initially assumed that import would function automatically in Node. However, it appears that it does not. Is there a specific npm package that needs t ...