Safari/Webkit executing function prematurely following ajax:complete event

Question

Safari/Webkit executing function prematurely following ajax:complete event

I am currently working on an AJAX call which is functioning properly. However, I am facing an issue regarding the dimensions of an image. Since the images are dynamically resized, I cannot declare their dimensions in HTML. When I try to fetch these dimensions by calling a function during the completion state, Webkit browsers return 0 as the dimensions while Firefox provides the correct values.

$.ajax({
        url: event.path,
        cache: false,
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            handler(XMLHttpRequest.responseText);
        },
        success: function(data, textStatus, XMLHttpRequest) {
            handler(data);
        },
        complete: function() {
            textBoxWidth();
        }
    });

The following code snippet shows the function being called:

function textBoxWidth() {
    $("#project .textBox").css("width", $("#project .imgBox:last img").width());
}

I have attempted using the condition:

if (jQuery.browser.safari && document.readyState != 'complete')

But it seems that the document state remains unchanged even after the DOM has been fully loaded.

Any suggestions or advice would be greatly appreciated.

jquery ajax safari webkit

Answer 1

Answer №1

Here's another demonstration of how you can make jQuery wait while loading using the `jQuery.active` variable.

This variable outputs 1 if jQuery is still in the process of loading, and 0 once it has finished loading.

$.ajax({
        url: path,
        cache: false,
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            handler(XMLHttpRequest.responseText);
        },
        success: function(data, textStatus, XMLHttpRequest) {
            handler(data);
        },
        complete: function() {
            if (jQuery.active !== 0) {
                setTimeout( arguments.callee, 100 );
                return;
            }
            //fancyFunction();
        }
    });

Answer 2

Here's another demonstration of how you can make jQuery wait while loading using the `jQuery.active` variable.

This variable outputs 1 if jQuery is still in the process of loading, and 0 once it has finished loading.

$.ajax({
        url: path,
        cache: false,
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            handler(XMLHttpRequest.responseText);
        },
        success: function(data, textStatus, XMLHttpRequest) {
            handler(data);
        },
        complete: function() {
            if (jQuery.active !== 0) {
                setTimeout( arguments.callee, 100 );
                return;
            }
            //fancyFunction();
        }
    });

Answer 3

Answer №2

After tinkering with some code, I found a solution that works for me.

$.ajax({
        url: event.path,
        cache: false,
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            handler(XMLHttpRequest.responseText);
        },
        success: function(data, textStatus, XMLHttpRequest) {
            handler(data);
        },
        complete: function() {
            var imgCount = $("#project .content").find("img");
            if (imgCount.length > 0) {
                if ($("#project .content img:last").width() == 0) {
                    setTimeout( arguments.callee, 100 );
                    return;
                }
            //fancyFunction();
            }
        }
    });

Here's what I did: I checked for images in my target div. If there are images present and the width of the last image is zero, I rechecked the width after 100 ms. Otherwise, I proceeded with other actions.

Answer 4

After tinkering with some code, I found a solution that works for me.

$.ajax({
        url: event.path,
        cache: false,
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            handler(XMLHttpRequest.responseText);
        },
        success: function(data, textStatus, XMLHttpRequest) {
            handler(data);
        },
        complete: function() {
            var imgCount = $("#project .content").find("img");
            if (imgCount.length > 0) {
                if ($("#project .content img:last").width() == 0) {
                    setTimeout( arguments.callee, 100 );
                    return;
                }
            //fancyFunction();
            }
        }
    });

Here's what I did: I checked for images in my target div. If there are images present and the width of the last image is zero, I rechecked the width after 100 ms. Otherwise, I proceeded with other actions.

Safari/Webkit executing function prematurely following ajax:complete event

Answer №1

Answer №2

Similar questions

After establishing the connection between Ajax and PHP with a relationship table, the inserted data is not being displayed

The request to remove the product from the server at URL http://localhost:8000/product/[object%20Object] encountered an internal server

"Exploring the best way to loop through multiple JSON data in a jQuery response

Steps for Implementing an Event Listener in JavaScript

Tips for transferring information from one php page to another php page via ajax

The AppJS warning: A potentially dangerous JavaScript attempt to access a frame with a URL

Get the JS file by tapping the download button, and access the

How to use JQuery UI sortable to automatically scroll to the bottom of the page

Using jQuery and Bootstrap in an ASP.NET Core project

Remove Chosen Pictures (Checkbox/PHP/MySQL)

Parsing Problem---Is there a Parsing Error?

The attempt to fetch the submitted data via the PHP URL was unsuccessful

Guide on Highcharts Bar Chart: Adjusting the Minimum Bar Width/Length

Ways to handle the ajax callback content

Using jQuery's sortable functionality to rearrange rows in a table can cause conflicts with Angular's orderBy feature

Transforming the input button into images

"PHP and MySQL Join Forces: Troubleshooting UNION Query Issues

Several jquery libraries are experiencing malfunctions

Switch between showing and hiding a div by clicking on the panel header and changing the symbol from + to

Retrieve all elements from an array using jQuery