Event based Bootstrap alerts.
A jQuery plugin for displaying Bootstrap alerts via jQuery events.
<div data-alerts="alerts" data-titles="{'warning': '<em>Warning!</em>'}" data-ids="myid"></div>
<script>
$(document).trigger("add-alerts", [
{
'message': "This is a warning.",
'priority': 'warning'
}
]);
</script>
Priority: error, warning, info, success
Enable binding of an element via JavaScript:
$("#example").bsAlerts({'titles': {'warning': '<em>Warning!</em>'}});
Just add data-alerts="alerts" to your element to bind automatically.
<div data-alerts="alerts"></div>
| Name | type | default | description |
|---|---|---|---|
| titles | object | {} | Optional title for each priority: error, warning, info, success |
| ids | string | '' | Comma separated list of alert ids to listen for. In addition to the standard events, events in the form 'set-alert-id-{alert_id}' will also be listened for. Works with jQuery-bsFormAlerts. |
The bound element will listen for an add event that will send the alert data as an object. You can also pass an array of alerts, with any priority, and they will all be displayed in their respective color.
// send an error alert
$(document).trigger("add-alerts", {
message: "This is an error",
priority: "error"
});
// send an array of alerts
$(document).trigger("add-alerts", [
{
message: "This is an error",
priority: "error"
},
{
message: "This is a warning",
priority: "warning"
},
{
message: "This is success",
priority: "success"
}
]);
The bound element will listen for a clear event that will clear the alerts.
// clear all alerts
$(document).trigger("clear-alerts");
The bound element will also listen for a set event with an id, if configured to do so. See ids in the Options above.
// send an alert with id='myid'
$(document).trigger("set-alert-id-myid", {
message: "Please enter at least 3 characters",
priority: "error"
});