CODEWITHSUNDEEP
javascriptjqueryhtml
Dexter
Dexter

Reputation: 528

how to seamlessly show progress using dynamic json data using javascript/jquery

Hi here i am trying to show the progress bar from dynamic data

requirement : get data from the dynamic json and need to call the api for every x seconds using set interval from 0 to 100 if it reaches 100 then we need to stop the progress & show the same progress in next page or if user presses we need to stop the process .

NOte: Need to call dyanmic json for every x seconds

what i did :

i created a progress for every x seconds so below is the code

<div>

            <div class="container">
                    <hr>
                    <div class="progress" id="blips">
                      <div class="progress-bar" role="progressbar">
                        <span class="sr-only"></span>
                      </div>
                    </div>

                    <hr>
                    <hr>

                    <button class="btn btn-primary">Stop</button>

            </div>


    </div>

js

var data = {
    timer: {
        "num": "95.6",
        "perfection": "20",
}
}
$(document).ready(function(){

   loadData();

  });

  function loadData(){
    var timerId = 0;
    var ctr=0;
    var max= data['timer']['perfection'];

    timerId = setInterval(function () {
      // interval function
      ctr++;
      $('#blips > .progress-bar').attr("style","width:" + ctr*max + "%");

      // max reached?
      if (ctr==max){
        clearInterval(timerId);
      }

    }, 500);


  }

  $('.btn-primary').click(function () {
    clearInterval(timerId);
  });

Upvotes: 3

Views: 464

Answers (1)

Rahul Salvi
Rahul Salvi

Reputation: 364

Made couple of changes:

  1. The variable data should be declared inside

    function loadData() {...}

    or passed in as an argument

  2. The jquery statement to set progress-bar width should be

    $('#blips > .progress-bar').css("width", ctr + "%");

With this changes, it works. See the fiddle

https://jsfiddle.net/rahulsalvi2k7/eapgd4rc/11/

Upvotes: 1

Related Questions