Adding progress bar after each ajax call?

Question

I want to add progress bar after each ajax call. Actually my code is working fine with firefox but not with chrome. I tried some solutions but it doesn't worked. I have also tried to change async = false but didn't worked.

My progress bar HTML:

<div id="myModal" class="modal">
            <div class="modalContent">
                <span id="progressPer">0%</span><br />
                <div id="progress">
                    <div id="progressBar"></div>
                </div>
                <span id="progressMsg">Waiting for...</span>
                <input type="button" class="closeButton" value="Go Back" onclick="return closeProgressBar()" />
            </div>
</div>

This is how I am using this progress bar using native JS and Jquery:

var modal = document.getElementById('myModal');
var btn = document.getElementById("btn");
var prgBar = document.getElementById("progressBar");
var prgPer = document.getElementById("progressPer");
var prgMsg = document.getElementById("progressMsg");
var prg = document.getElementById("progress");
var prgCloseBtn = document.getElementsByClassName("closeButton")[0];

console.log(modal);
    modal.style.display = "block";

    prg.style.display = "block";

    prgBar.style.width = "0%";
    prgPer.innerHTML = "0%";
    console.log("0% Completed...");
    prgMsg.innerHTML = "Preparing...";

var chkspammsg = checkforspam(); //This function will make an ajax call

if(chkspammsg == 1) {
prgBar.style.width = "20%";
        prgPer.innerHTML = "20%";
        console.log("20% completed...");
        prgMsg.innerHTML = "Checking for Spam";
        console.log("\n\nInside check_save --> check_spf Return --> " + ret);

}

var chkerr = checkforerror(); //This function will make another ajax call and returns value.

prgBar.style.width = "40%";
    prgPer.innerHTML = "40%";
    console.log("40% Completed...");
    prgMsg.innerHTML = "checking for errors";

AND So on....

try to debug you code in chrome step by step.you will come to know what is the problem — Dinesh undefined, Aug 10 '17 at 05:53
See [Upload multiple image using AJAX, PHP and jQuery](https://stackoverflow.com/questions/28856729/upload-multiple-image-using-ajax-php-and-jquery/) — guest271314, Aug 10 '17 at 06:03
I tried to debug. I also tried to put check points but doesn't encountered actual problem. It seems Chrome executing ajax calls first and then moves to the progress bar. Actually when I put check points it works but it fails when I remove them. — Sainath Parkar, Aug 10 '17 at 06:04

Adding progress bar after each ajax call?

0 Answers0