Twitter Bootstrap alert (notification) dynamically change text

Question

Simple question, but I didn't succeed finding a satisfactory answer on SO.

When I have a bootstrap alert:

<div id='alert' class='alert alert-error hide'>Alert.</div>

I want the text to be controlled using either Javascript of by jQuery, I just looked at this solution to this problem, but does it have to be so complicated? Really?

The solution is about 5 lines of Javascript. I don't think you can reasonably call that complicated. — glosrob, Aug 07 '13 at 13:27
Possible duplicate of [Dynamically create Bootstrap alerts box through JavaScript](https://stackoverflow.com/questions/10082330/dynamically-create-bootstrap-alerts-box-through-javascript) — Mahdi Alkhatib, Jul 26 '17 at 07:47

score 7 · Answer 1 · answered Mar 31 '17 at 14:52

7

As simple as: $("#alert").text("My new Text");

answered Mar 31 '17 at 14:52

Yahya Yahyaoui

2,833
23
30

score 6 · Accepted Answer · answered Aug 07 '13 at 13:58

Referenced the solution and now came up with this:

HTML:

<div id='alert' class='hide'></div>

Javascript:

function showAlert(message) {
      $('#alert').html("<div class='alert alert-error'>"+message+"</div>");
      $('#alert').show();
    }
showAlert('variable');

Working jsfiddle.

score 0 · Answer 3 · answered Jun 01 '15 at 12:20

<input type = "button" id = "clickme" value="Click me!"/>
<div id = "alert_placeholder"></div>
<script>
bootstrap_alert = function() {}
bootstrap_alert.warning = function(message) {
            $('#alert_placeholder').html('<div class="alert"><a class="close" data-dismiss="alert">×</a><span>'+message+'</span></div>')
        }

$('#clickme').on('click', function() {
            bootstrap_alert.warning('Your text goes here');
});
</script>

Twitter Bootstrap alert (notification) dynamically change text

3 Answers3