Progress bar not hiding after fetching values via AJAX in JavaScript

Question

I am using an online webservice to get the rate of a particular currency. I am showing a progress bar to the user when he changes dropdown index and on the same dropdown Onchange I am calling the webservice to get the latest rates. Everything is working fine but the problem is with progressbar. It does not get hidden after getting the value from the webservice. My code for calling the progress bar and fetching values from webservice is like this:

<script type="text/javascript">
    function GetBalanceQty(val) {
        //in val u get dropdown list selected value
        var id = val;
        ShowProgress();//Calling Progress Bar
        var xmlhttp = new XMLHttpRequest();
        var url = "https://openexchangerates.org/api/latest.json?app_id=324d066072324a7fba34618f5c5dfd83";
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                myFunction(xmlhttp.responseText);
            }
        }
        xmlhttp.open("GET", url, true);
        xmlhttp.send();

        function myFunction(response) {
            var currencyData = JSON.parse(response);
            var i;
            if (!currencyData.rates) {
                // possibly handle error condition with unrecognized JSON response
                alert("currency data not found!");
            }
            // id variable is available from outer function
            if (id in currencyData.rates) {
                var x = document.getElementById('<%= txtAmount.ClientID %>').value / currencyData.rates[id];
                document.getElementById('<%= lblValue.ClientID %>').value = Number((x).toFixed(2));
                document.getElementById('<%= lblDispValue.ClientID %>').innerHTML ='USD$ '+ Number((x).toFixed(2));
            } else {
                alert("unknown currency code!");
            }
        }
    }
</script> 

My ProgressBar code is like this:

 <!--Progress Bar-->

<style type="text/css">
    .modal
    {
        position: fixed;
        top: 0;
        left: 0;
        background-color: black;
        z-index: 99;
        opacity: 0.8;
        filter: alpha(opacity=80);
        -moz-opacity: 0.8;
        min-height: 100%;
        width: 100%;
    }
    .loading
    {
        font-family: Arial;
        font-size: 10pt;
        border: 5px solid #67CFF5;
        width: 200px;
        height: 100px;
        display: none;
        position: fixed;
        background-color: White;
        z-index: 999;
    }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    function ShowProgress() {
        setTimeout(function () {
            var modal = $('<div />');
            modal.addClass("modal");
            $('body').append(modal);
            var loading = $(".loading");
            loading.show();
            var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
            var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
            loading.css({ top: top, left: left });
        }, 200);
    }

    function changes() {
       // ShowProgress();
    }
</script>
<!--Progress Bar-->

Progress bar is like this:

<!--Progress Bar-->
<div class="loading" align="center">
    Loading. Please wait.<br />
    <br />
    <img src="../images/loader.gif" alt="" />
</div>
<!--Progress Bar-->    

Answer 1

You need to hide the progress bar once you get the response from the ajax call. Something like this will do:

xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
          setTimeout(function(){$(".loading").hide()}, 200); // you can write a hideProgressBar() function to achieve this. Added a timeout to make sure the progress bar is already shown;
          myFunction(xmlhttp.responseText);
    }
}

Answer 2

Hide progress bar on success call.Try this javascript, let me know if its work for you.

<script type="text/javascript">
  function GetBalanceQty(val) {
      //in val u get dropdown list selected value

      var id = val;

      ShowProgress();//Calling Progress Bar

      var xmlhttp = new XMLHttpRequest();
      var url = "https://openexchangerates.org/api/latest.json?app_id=324d066072324a7fba34618f5c5dfd83";

      xmlhttp.onreadystatechange = function () {
          if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
              myFunction(xmlhttp.responseText);
          }
      }
      xmlhttp.open("GET", url, true);
      xmlhttp.send();

      function myFunction(response) {



          var currencyData = JSON.parse(response);
          var i;

          if (!currencyData.rates) {
              // possibly handle error condition with unrecognized JSON response
              alert("currency data not found!");
              ShowProgress().hide(); // Hide progress bar
          }

          // id variable is available from outer function
          if (id in currencyData.rates) {

              var x = document.getElementById('<%= txtAmount.ClientID %>').value / currencyData.rates[id];
              document.getElementById('<%= lblValue.ClientID %>').value = Number((x).toFixed(2));
              document.getElementById('<%= lblDispValue.ClientID %>').innerHTML ='USD$ '+ Number((x).toFixed(2));
              ShowProgress().hide(); // Hide progress bar
        } else {
            alert("unknown currency code!");
            ShowProgress().hide(); // Hide progress bar
        }
    }


}

</script> 

Answer 3

Is it what you want?

xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4) {
        HideProgress();

        if (xmlhttp.status == 200) {
            myFunction(xmlhttp.responseText);
        }
    }
}

function HideProgress() {
    var loading = $(".loading");

    loading.hide();
}