javascript - Jquery UI Progressbar filling reduced progress -

 $.get('jobs', {     }, function (responsetext) {         rt = json.parse(responsetext);         console.log(rt);         (i = 0; < 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 code make progressbar on td of each row of table. when doing 1 row worked fine, after i've added multiple rows in db, values not coming accurate. when value of pvalis 100, filling 1/4th of progress bar.

i unable replicate issue. may want edit post , include more details, example data, , errors generated console.

i created 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 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());       (i = 0; < rt.length; i++) {         target.append("<tr><td><div id='progressbar-" + + "' 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 expected. code less intense. function be:

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