Search code examples
javascriptjqueryjquery-uiprogress-bar

How to dynamically set progress bar value in jQuery?

On my tutorial website, I'm using jQuery UI progress bars not as bars that will change, but as images to display to show the user how far they are through the tutorial. Example:

$(document).ready(function() {
  $(.progressbar).progressbar({
    value: 50
  });
});
<link rel="stylesheet" type="text/css" href="CSS/jQueryUI.css">
<script type="text/javascript" src="JS/jQuery.js"></script>
<script type="text/javascript" src="JS/jQueryUI.js"></script>
<script type="text/javascript" src="JS/index.js"></script>

<body>
  Lots of stuff here
  <div class="progressbar"></div>
  <span style="text-align: center">50% complete</span>
  Lots more stuff here
</body>

However, what I want it to do is have multiple progress bars with different values. I want to have a class for the progress bars, and a custom attribute for its value. Something like this:

$(document).ready(function() {
  $(.progressbar).progressbar({
    value: $(.progressbar).attr("data-progress-value");
  });
});
<link rel="stylesheet" type="text/css" href="CSS/jQueryUI.css">
<script type="text/javascript" src="JS/jQuery.js"></script>
<script type="text/javascript" src="JS/jQueryUI.js"></script>
<script type="text/javascript" src="JS/index.js"></script>

<body>
  Lots of stuff here
  <div class="progressbar" data-progress-value="33"></div>
  <span style="text-align: center">33% complete</span> Lots more stuff here
  <div class="progressbar" data-progress-value="67"></div>
  <span style="text-align: center">67% complete</span> More stuff here
  <div class="progressbar" data-progress-value="90"></div>
  <span style="text-align: center">90% complete</span>
</body>

I know this code won't work though, because the jQuery docs say .attr and all similar functions only get the attribute of the first of the set.

Is something like this possible in jQuery?

Or, for the XY problem showing here, If this is not possible, how can I dynamically set static progress bars?

Thank you in advance.

Solution

  • Fairly simple in an each() where you have access to each element instance before initializing plugin for that element.

    $(function() {
  $('.progressbar').each(function() {
    var $el = $(this);
    $el.progressbar({
      value: $el.data("progress-value")
    });
  });
})
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>


Lots of stuff here
<div class="progressbar" data-progress-value="33"></div>
<span style="text-align: center">33% complete</span> Lots more stuff here
<div class="progressbar" data-progress-value="67"></div>
<span style="text-align: center">67% complete</span> More stuff here
<div class="progressbar" data-progress-value="90"></div>
<span style="text-align: center">90% complete</span>