Jquery UI Progressbar filling reduced progress

Question

 $.get('jobs', {
    }, function (responseText) {
        rt = JSON.parse(responseText);
        console.log(rt);
        for (i = 0; i < rt.length; i++)
        {
            $("#jobs").append("<tr><td><div id='progressbar"+i+"' class='progressbar'></div></td></tr>");
             pval = (rt[i][2] / rt[i][1]) * 100;

            $("#progressbar"+i).progressbar({
                value: pval,
                max:  100
            });

        }

    });

I have written this code to make progressbar on a td of each row of a table. When i was doing it for 1 row it worked fine, but after I've added multiple rows in my Db, the values are not coming to be accurate. even when value of pvalis 100, it is filling like 1/4th of the progress bar.

Answer 1

I was unable to replicate the issue. You may want to edit your post and include more details, example data, and any errors generated by Console.

I created the following test: https://jsfiddle.net/Twisty/0v4q5a8z/

HTML

<div class="ui-widget">
  <a href="#" id="getProgress" class="button">Get Progress</a>
  <table id="jobs" width="100%">
    <tbody>
    </tbody>
  </table>
</div>

JavaScript

var progress = [
  ["p1", 100, 100],
  ["p2", 100, 75],
  ["p3", 100, 22]
];

function getProgress(source, target) {
  /* Ajax Post used for Example purposes
  ** Example response:
  ** Array [
  **   ["p1", 100, 100],
  **   ["p2", 100, 80],
  **   ["p3", 100, 75]
  ** ]
  */

  $.ajax({
    url: source,
    data: {
      json: JSON.stringify(progress)
    },
    type: "POST",
    dataType: "json",
    success: function(responseText) {
      var rt, pval;
      rt = responseText
      console.log(rt.toString());
      for (i = 0; i < rt.length; i++) {
        target.append("<tr><td><div id='progressbar-" + i + "' class='progressbar'></div></td></tr>");
        pval = (rt[i][2] / rt[i][1]) * 100;
        $("#progressbar-" + i).progressbar({
          value: pval,
          max: 100
        });
      }
    }
  });
}

$(function() {
  $(".button").button();
  $("#getProgress").click(function(e) {
    e.preventDefault();
    getProgress("/echo/json/", $("#jobs"));
  });
});

This test works as expected. Your code could be less intense. The function could be:

function getProgress(source, target) {
  $.getJSON(source, function(responseText) {
      var rt, pval;
      rt = responseText
      for (i = 0; i < rt.length; i++) {
        target.append("<tr><td><div id='progressbar-" + i + "' class='progressbar'></div></td></tr>");
        pval = (rt[i][2] / rt[i][1]) * 100;
        $("#progressbar-" + i).progressbar({
          value: pval,
          max: 100
        });
      }
    }
  });
}