Dynamically create Bootstrap alert window via JavaScript

Question

I am using Bootstrap 2.0 for my project and want to dynamically add a Bootstrap alert window on my page ( http://twitter.github.com/bootstrap/javascript.html#alerts ). I want to do something like:

bootstrap-alert.warning("Invalid Credentials"); 

Answer 1

Try this (see a working example of this code in jsfiddle: http://jsfiddle.net/periklis/7ATLS/1/ )

 <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>​ 

EDIT : Now there are libraries that simplify and simplify this process, for example bootbox.js

Answer 2

 /** Bootstrap Alerts - Function Name - showalert() Inputs - message,alerttype Example - showalert("Invalid Login","alert-error") Types of alerts -- "alert-error","alert-success","alert-info","alert-warning" Required - You only need to add a alert_placeholder div in your html page wherever you want to display these alerts "<div id="alert_placeholder"></div>" Written On - 14-Jun-2013 **/ function showalert(message,alerttype) { $('#alert_placeholder').append('<div id="alertdiv" class="alert ' + alerttype + '"><a class="close" data-dismiss="alert">×</a><span>'+message+'</span></div>') setTimeout(function() { // this will automatically close the alert and remove this if the users doesnt close it in 5 secs $("#alertdiv").remove(); }, 5000); } 

Answer 3

You can also create an HTML warning template as follows:

 <div class="alert alert-info" id="alert_template" style="display: none;"> <button type="button" class="close">×</button> </div> 

And you can do it in JavaScript here:

 $("#alert_template button").after('<span>Some text</span>'); $('#alert_template').fadeIn('slow'); 

It is, in my opinion, cleaner and faster. Additionally, you use Twitter Bootstrap standards when calling fadeIn() .

To ensure that this warning pattern also works with multiple calls (therefore, it does not add a new message to the old one), add this here in your JavaScript:

 $('#alert_template .close').click(function(e) { $("#alert_template span").remove(); }); 

Thus, this call removes the span every time you close the warning with the x button.

Answer 4

I created this VERY SIMPLE and basic plugin:

 (function($){ $.fn.extend({ bs_alert: function(message, title){ var cls='alert-danger'; var html='<div class="alert '+cls+' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>'; if(typeof title!=='undefined' && title!==''){ html+='<h4>'+title+'</h4>'; } html+='<span>'+message+'</span></div>'; $(this).html(html); }, bs_warning: function(message, title){ var cls='alert-warning'; var html='<div class="alert '+cls+' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>'; if(typeof title!=='undefined' && title!==''){ html+='<h4>'+title+'</h4>'; } html+='<span>'+message+'</span></div>'; $(this).html(html); }, bs_info: function(message, title){ var cls='alert-info'; var html='<div class="alert '+cls+' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>'; if(typeof title!=='undefined' && title!==''){ html+='<h4>'+title+'</h4>'; } html+='<span>'+message+'</span></div>'; $(this).html(html); } }); })(jQuery); 

Using

 <div id="error_container"></div> <script> $('#error_container').bs_alert('YOUR ERROR MESSAGE HERE !!', 'title'); </script> 

the first EVER plugin and it can be easily done better

Answer 5

I found it today, made some settings and combined the functions of other answers, updating them to download 3.x. NB: this answer requires jQuery.

In html:

 <div id="form_errors" class="alert alert-danger fade in" style="display:none"> 

In JS:

 <script> //http://stackoverflow.com/questions/10082330/dynamically-create-bootstrap-alerts-box-through-javascript function bootstrap_alert(elem, message, timeout) { $(elem).show().html('<div class="alert"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button><span>'+message+'</span></div>'); if (timeout || timeout === 0) { setTimeout(function() { $(elem).alert('close'); }, timeout); } }; </script>​ 

Then you can call it either as:

 bootstrap_alert('#form_errors', 'This message will fade out in 1 second', 1000) bootstrap_alert('#form_errors', 'User must dismiss this message manually') 

Answer 6

FWIW I created a JavaScript class that can be used at runtime.
This is on GitHub, here .

There is a readme with a more detailed explanation, but below I will give a small example:

 var ba = new BootstrapAlert(); ba.addP("Some content here"); $("body").append(ba.render()); 

Above would be to create a simple primary alert with a paragraph element inside containing the text "Some content here."

There are also parameters that can be set during initialization.
For your requirement you must do:

 var ba = new BootstrapAlert({ dismissible: true, background: 'warning' }); ba.addP("Invalid Credentials"); $("body").append(ba.render()); 

The render method will return an HTML element that can then be inserted into the DOM. In this case, we add it to the end of the body tag.

This is a library under development, but it is still in very good working condition.

Answer 7

As a result, I used toastr ( https://github.com/CodeSeven/toastr ) with style modifications Make notifications about how as bootstrap alerts

Answer 8

I found that AlertifyJS is a better alternative and has a Bootstrap theme.

 alertify.alert('Alert Title', 'Alert Message!', function(){ alertify.success('Ok'); }); 

There are also 4 components : Warning , Confirm , Prompt and Notifier . >.

Exmaple: JSFiddle

Answer 9

just summarize:

 $(document).ready(function() { $('button').on( "click", function() { showAlert( "OK", "alert-success" ); } ); }); function showAlert( message, alerttype ) { $('#alert_placeholder').append( $('#alert_placeholder').append( '<div id="alertdiv" class="alert alert-dismissible fade in ' + alerttype + '">' + '<a class="close" data-dismiss="alert" aria-label="close" >×</a>' + '<span>' + message + '</span>' + '</div>' ) ); // close it in 3 secs setTimeout( function() { $("#alertdiv").remove(); }, 3000 ); } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> <button onClick="" >Show Alert</button> <div id="alert_placeholder" class="container" ></div> 

codepen