Question

I am manipulating the data-complete-text attribute of a link using jQuery. My code looks like this.

var complete =  _self.attr("data-complete-text");

_self.attr("data-complete-text","<span class='symbol-done-tick'></span><span class='acheived-text'>"+complete+"</span>");

That is I am assigning html spans to this attribute to get the desired effect and it works fine. I mean, the spans get inserted properly but the CSS classes which I have specified in these spans don’t have any effect. I dunno why. Help me out.

Answer 1

If you’re trying to set the data-complete-text so that Bootstrap’s Button will use it, after setting the data-complete-text attribute you have to set the state of the button as well:

_self.button('complete');

The documentation (such as it is) doesn’t say it supports HTML there, but it seems to work in my test: Live Example | Source

HTML:

<button id="target" type="button" class="btn btn-primary" data-loading-text="Loading...">Original Text</button>

JavaScript:

jQuery(function($) {

  // Get the button
  var _self = $("#target");

  // Set the attribute
  _self.attr("data-complete-text",
             "<span class='foo'>Complete</span>");

  // Wait for click
  _self.one("click", function() {

    _self.button('complete');
  });

});

In the above, the foo class on the span inside the data-complete-text works when you set the button state to 'complete'.