Jquery – Progress Bar not Working in AJAX Form Output?

Your progress bar doesn’t work in AJAX because when the page is first loaded, there’s no progress bar to work with – it only appears after the AJAX call. Your progress bar script runs immediately when the page loads, and it tries to access .progress, .progress-bar, and .alert elements which don’t exist yet, because they’re only added to the page after the AJAX call.

To make it work, you should include the progress bar script into the success function of the AJAX call. This way, it will be called after the new elements are added to the page.

Here is the modified JavaScript code:

$('#checkaddress').on('submit', function(e) {
    // get formdata in a variable that is passed to the ajax request
    var dataToPassToAjax = $(this).serialize();
    $.ajax({
        url: "process.php",
        type: "POST",
        data: dataToPassToAjax,
        cache: false,
        success: function(resultHtml) {
            // add the returned data to the .done element
            $('.done').html(resultHtml).fadeIn('slow');
            
            // run the progress bar script here
            var $progress = $('.progress');
            var $progressBar = $('.progress-bar');
            var $alert = $('.alert');
            setTimeout(function() {
                $progressBar.css('width', '10%');
                setTimeout(function() {
                    $progressBar.css('width', '30%');
                    setTimeout(function() {
                        $progressBar.css('width', '45%');
                        setTimeout(function() {
                            $progressBar.css('width', '80%');
                            setTimeout(function() {
                                $progressBar.css('width', '90%');
                                setTimeout(function() {
                                    $progressBar.css('width', '95%');
                                    setTimeout(function() {
                                        $progressBar.css('width', '98%');
                                        setTimeout(function() {
                                            $progressBar.css('width', '99%');
                                            setTimeout(function() {
                                                $progressBar.css('width', '100%');
                                                setTimeout(function() {
                                                    $progress.css('display', 'none');
                                                    $alert.css('display', 'block');
                                                }, 500); // WAIT 5 milliseconds
                                            }, 500); // WAIT 5 milliseconds
                                        }, 800); // WAIT 5 milliseconds
                                    }, 600); // WAIT 2 seconds
                                }, 700); // WAIT 1 seconds
                            }, 900);
                        }, 600); // WAIT 2 seconds
                    }, 400); // WAIT 1 seconds
                }, 700); // WAIT 1 seconds
            }, 800); // WAIT 1 second
        }
    });
    // cancel the default form submit
    return false;
});

This should resolve your issue. The progress bar script now runs after the AJAX call is successful, and the new elements are added to the DOM, so it should be able to find and manipulate them as expected.

Improvements

The current JavaScript code involves a lot of nested setTimeout functions which make it hard to read and maintain. We can simplify it with a more dynamic and modular approach.

Consider something like this:

$('#checkaddress').on('submit', function(e) {
    // get formdata in a variable that is passed to the ajax request
    var dataToPassToAjax = $(this).serialize();
    $.ajax({
        url: "process.php",
        type: "POST",
        data: dataToPassToAjax,
        cache: false,
        success: function(resultHtml) {
            // add the returned data to the .done element
            $('.done').html(resultHtml).fadeIn('slow');
            
            // run the progress bar script here
            var $progress = $('.progress');
            var $progressBar = $('.progress-bar');
            var $alert = $('.alert');
            
            var width = 0;
            var increment = 10; // change the increment value to control the speed of the progress bar
            var interval = setInterval(function() {
                width = width + increment;
                if(width >= 100) { // when progress reaches 100, stop interval and show alert
                    clearInterval(interval);
                    $progress.css('display', 'none');
                    $alert.css('display', 'block');
                }
                $progressBar.css('width', width + '%');
            }, 800); // this value controls the delay between each increment
        }
    });
    // cancel the default form submit
    return false;
});

Here, the progress bar width increases by 10% every 800 milliseconds until it reaches 100%, at which point the interval is cleared and the alert is displayed.

This approach is a little bit less flexible than how I would recommend, but it is easier to understand. If you want to give it a try anyway, something like this is how I would personally implement it.

async function delay(duration) {
    return new Promise(resolve => setTimeout(resolve, duration));
}

async function updateProgressBar($progressBar, $progress, $alert, values) {
    for(let i = 0; i < values.length; i++) {
        await delay(values[i].delay);
        $progressBar.css('width', `${values[i].width}%`);
    }
    $progress.css('display', 'none');
    $alert.css('display', 'block');
}

$('#checkaddress').on('submit', function(e) {
    // get formdata in a variable that is passed to the ajax request
    var dataToPassToAjax = $(this).serialize();
    $.ajax({
        url: "process.php",
        type: "POST",
        data: dataToPassToAjax,
        cache: false,
        success: function(resultHtml) {
            // add the returned data to the .done element
            $('.done').html(resultHtml).fadeIn('slow');
            
            // run the progress bar script here
            var $progress = $('.progress');
            var $progressBar = $('.progress-bar');
            var $alert = $('.alert');
            var values = [
                {width: 10, delay: 800},
                {width: 30, delay: 700},
                {width: 45, delay: 400},
                {width: 80, delay: 600},
                {width: 90, delay: 900},
                {width: 95, delay: 700},
                {width: 98, delay: 600},
                {width: 99, delay: 800},
                {width: 100, delay: 500}
            ];
            updateProgressBar($progressBar, $progress, $alert, values);
        }
    });
    // cancel the default form submit
    return false;
});

Don’t worry about it if the second example is too hard to understand. Focus on getting you code working and try to keep an eye out for code duplication. Every time you are repeating a lot of code, there’s probably a better way to do it. 🙂