I was assigned to integrate MangoSlick theme to our current admin panel, Its a jQuery, Slick(?) and Responsive template.

First, let me explain how the API goes

In the documentation, it only says this is the only way

data-[options]=[value]

Example: If I wanna make a progress bar

I can use this format

<div class="progress">
            <div class="bar" data-title="[title]" data-value="[value]" data-max="[max]" data-format="[format string]"></div>
</div>

so filling-in values

<div class="progress">
        <div class="bar" data-title="Space" data-value="1285" data-max="5120" data-format="0,0 MB"></div>
</div>

I will have this as output

Now, the main question is when I use jQuery attr() to change the attribute values for data-title, data-max, data-value and data-format.

Why is it not working?

<script>
    var jq = $.noConflict();
    jq(document).ready(function(){
      jq('#bokz').attr("data-title", "No Space");
    });
</script>

Using the script above and inspect element in chrome the values are changed

but not in the progressbar

Some of you may have some ideas on this?

Any help/suggestion would be very much appreciated.