ajaxStart - Change display not always working

Question

NOTE:: I have replaced some code with comments to make it much shorter and more readable

I am working with Javascript (Ajax) and PHP (Laravel). I have run into a predicament! When calling an ajax function I have two listener to show a loading symbol while the ajax is processing, and then hide it again once it's done.

$( document ).ajaxStart( function() {
    $( '#loading' ).css( 'display', 'block' );
} );

$( document ).ajaxStop( function() {
    $( '#loading' ).css( 'display', '' );
} );

When you click on the submit button, the HTML onclick says to go to this function which is working just fine:

function submit( button ) {
    var table = $( button ).closest( '.popup' ).find( 'table:first' );

    var verified = verifyTable( table );

    if ( verified == -1 ) {
        return -1;
    }

    if ( table.hasClass( 'campaigns' ) ) {
        campaign = table.find( '.campaign:first' );

        submitNewCampaign( campaign );
    } else if ( table.hasClass( 'groups' ) ) {
        groups = table.find( 'tr.group' );

        for ( var i = 0; i < groups.length; ++i ) {
            submitNewGroup( groups.eq( i ) );
        }
    } else if ( table.hasClass( 'keywords' ) ) {
        keywords = table.find( 'tr.keyword' );

        for ( var i = 0; i < keywords.length; ++i ) {
            submitNewKeyword( keywords.eq( i ) );
        }
    }

    closePopup();
}

If from there you are sent to submitNewCampaign(), everything works just fine.

function submitNewCampaign( campaign ) {
    // Set campaign variables

    $.ajax({
        url : '/ajax/addCampaign',
        type : 'POST',
        data : { // set campaign data },
        success : function( result ) {
            // get all groups in campaigns and loop through
            for ( var i = 0; i < groups.length; ++i ) {
                // set group variables

                $.ajax({
                    url : '/ajax/addGroup',
                    type : 'POST',
                    async : false,
                    data : { // set group data },
                    success : function( result ) {
                        // get all keywords in group and loop
                        for ( var i = 0; i < keywords.length; i++ ) {
                            // set keyword variables 

                            $.ajax({
                                url : '/ajax/addKeyword',
                                type : 'POST',
                                async : false,
                                data : { // set keyword data },
                                success : function( result ) { // done },
                                error : function( result ) {
                                    alert( "error adding new keyword (name - " + keyword_name + ")");
                                    console.log( result );
                                }
                                );
                        }
                    },
                    error : function( result ) {
                        alert( "error adding new group (name - " + group_name + ")" );
                        console.log( result );
                    }
                });
            }
        },
        error : function( result ) {
            alert( "error adding new campaign (name - " + campaign_name + "): " + JSON.parse( xhr.responseText ) );
        }
    });
}

However if you are send to either submitNewGroup() or submitNewKeyword(), the loading image does not appear.

function submitNewGroup ( group ) {
    // set group variables

    $.ajax({
        url : '/ajax/addGroup',
        type : 'POST',
        async : false,
        data : { // set group data },
        success : function( result ) {
            // get all keywords in group and loop

            for ( var i = 0; i < keywords.length; ++i ) {
                // set all keyword variables 

                $.ajax({
                    url : '/ajax/addKeyword',
                    type : 'POST',
                    async : false,
                    data : { // set all keyword data },
                    success : function( result ) { // done },
                    error : function( result ) {
                        console.log( result );
                    }
                });
            }
        },
        error : function( result ) {
            console.log( result );
        }
    });
}

function submitNewKeyword( keyword ) {
    // set keyword variables
    $.ajax({
        url : '/ajax/addKeyword',
        type : 'POST',
        async : false,
        data : { // set keyword data },
        success : function( result ) { //done },
        error : function( result ) {
            console.log( result );
        }
    });
}

IMPORTANT: No errors appear in the log when any of the three functions are called. All three complete their assigned tasks with no issues.

I suspect it has something to do with calling those functions in a loop. — Barmar, Jun 06 '18 at 23:42

score 0 · Accepted Answer · answered Jun 06 '18 at 23:42

0

I tried a few things and the one that made it work was: I removed async from the outer most ajax call for both group and keyword

answered Jun 06 '18 at 23:42

LucyTurtle

1,043
1
17
37

1

You should try to remove all uses of `async: false`. Asynchronous AJAX is deprecated, and blocks the UI. Learn to use `Promise.all()` to wait for multiple requests. – Barmar Jun 06 '18 at 23:55
@Barmar, thank you for your suggestion. I have had issues in the past understanding how to implement promises. Do you have a good example that you know of? – LucyTurtle Jun 07 '18 at 02:30
1

See https://stackoverflow.com/questions/3709597/wait-until-all-jquery-ajax-requests-are-done – Barmar Jun 07 '18 at 14:47

ajaxStart - Change display not always working

1 Answers1