CODEWITHSUNDEEP
phpjquerytwitter-bootstrap
Laurence
Laurence

Reputation: 60058

Bootstrap data-loading-text to contain quotes

My question: How do I get quotes to work within a data-loading-text attribute on a button like this:

data-loading-text="<i class="fa fa-spinner fa-spin"> Loading..."

Background:

Using the Bootstrap "loading" example from here - I have a button which, when clicked, changes to "loading..." as intended

<button type="button" id="loading-example-btn" data-loading-text="Loading..." class="btn btn-primary">
   Click me
</button>

It works with the following script and changes "Click me" to "Loading..."

<script>
  $('#loading-example-btn').click(function () {
    var btn = $(this)
    btn.button('loading')
  });
</script>

To complicate matters - the button text is actually generated as part of a PHP macro:

return '<button id="submitaction" class="btn btn-primary" data-loading-text="Loading..." type="submit">Click Me</button>';

But now I want to include a Font Awesome 'spinning' icon as part of the loading text. The problem is this is the code I need to include:

<i class="fa fa-spinner fa-spin">

And because of the " " in there - I cannot simply put it in the data-loading-text field, otherwise the quotes " " causes the text to be rendered incorrectly.

Upvotes: 0

Views: 1871

Answers (1)

James
James

Reputation: 818

Try escaping the <i> class attribute with backslashes, like

return '<button id="submitaction" class="btn btn-primary" data-loading-text="<i class=\'fa fa-spinner fa-spin\'>Loading...</i>" type="submit">Click Me</button>';

This should output:

<button id="submitaction" class="btn btn-primary" data-loading-text="<i class='fa fa-spinner fa-spin'>Loading...</i>" type="submit">Click Me</button>

Upvotes: 3

Related Questions