Jquery UI Progressbar заполнение уменьшает прогресс

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
            });

        }

    });

Я написал этот код, чтобы сделать прогрессбар на тд каждой строки таблицы. Когда я делал это для 1 строки, это работало нормально, но после того, как я добавил несколько строк в свою базу данных, значения не стали точными. даже когда значение pval100, это заполнение, как 1/4 от индикатора выполнения.

Answer 1

Я не смог повторить проблему. Возможно, вы захотите отредактировать свое сообщение и включить больше деталей, пример данных и любые ошибки, сгенерированные Консолью.

Я создал следующий тест: 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"));
  });
});

Этот тест работает как ожидалось. Ваш код может быть менее интенсивным. Функция может быть:

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
        });
      }
    }
  });
}