JSFiddle - React, Tailwind, and code Playground

by Twisty

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<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 [
  **   Array [ String "NAME", Int MAX, Int VAL],
  **   ...
  **   ["P99", 100, 25]
  ** ]
  */

  $.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"));
  });
});