jQuery Information & Error Alert Plugin – Bootstrap Message

bootstrap.message is a jQuery plugin that creates Bootstrap 5 data and error messages inside any container aspect.

You need to use it for type suggestions, AJAX standing messages, account notices, and inline errors by means of a single $(selector).message() name.

Options

• Plain textual content or HTML message content material.
• Bootstrap Icons for standing suggestions.
• Non-compulsory shut button for dismissible messages.
• Updates message content material and standing after initialization.
• Guide present and conceal management.
• Reads preliminary message content material from the matched aspect.
• Helps delayed preliminary show.

How To Use It

Set up And Load The Required Recordsdata

The plugin requires jQuery, Bootstrap 5 CSS and JavaScript, and Bootstrap Icons. Load jQuery earlier than bootstrap.message.js, and cargo the Bootstrap bundle once you use dismissible messages.

<!-- Bootstrap 5 -->
<hyperlink rel="stylesheet" href="/path/to/bootstrap.min.css">

<!-- Bootstrap Icons -->
<hyperlink rel="stylesheet" href="/path/to/bootstrap-icons.min.css">

<!-- jQuery -->
<script src="/path/to/jquery.min.js"></script>

<!-- Bootstrap 5 JavaScript -->
<script src="/path/to/bootstrap.bundle.min.js"></script>

<!-- bootstrap.message -->
<script src="/path/to/bootstrap.message.min.js"></script>

Fundamental Utilization

Create a DIV aspect for the message:

<div id="account-status">
  Your account settings have been saved.
</div>

Initialize the plugin after the dependencies have loaded. The plugin reads the prevailing HTML from #account-status once you omit the message choice. It replaces that content material with Bootstrap alert markup and shows the message instantly by default. The default data sort makes use of Bootstrap’s alert-success class and an info-circle icon. The error sort makes use of alert-danger and an exclamation-triangle icon.

$(perform () {
  $("#account-status").message();
});

All Plugin Configuration Choices

• message (String): Units the textual content or HTML contained in the message. The default is an empty string. An empty worth reads the matched aspect’s current HTML throughout initialization.
• sort (String): Units the message standing. Supported values are "data" and "error". The default is "data". The implementation maps "data" to Bootstrap’s success alert fashion and different values to the hazard fashion.
• dismiss (Boolean): Provides a Bootstrap shut button when set to true. The default is true.
• autoShow (Boolean): Exhibits the matched aspect throughout initialization when set to true. The default is true. A false worth leaves the aspect’s present show state unchanged.

API Strategies

// Present a message container that was hidden by means of the plugin.
$("#account-status").message("present");

// Conceal the message container.
$("#account-status").message("disguise");

// Rebuild the message with new choices.
$("#account-status").message("choices", {
  sort: "error",
  message: "We couldn't save your account settings."
});

// Take away generated message markup, restore the saved message choice,
// disguise the matched aspect, and clear the plugin knowledge.
$("#account-status").message("destroy");

Superior Examples

Present Type Submission Suggestions

<type id="profile-form">
  <label for="display-name">Show title</label>
  <enter id="display-name" title="displayName" sort="textual content">

  <button sort="submit">Save Profile</button>
</type>

<div id="profile-status" fashion="show:none"></div>

<script>
var $profileStatus = $("#profile-status").message({
  autoShow: false,
  dismiss: true,
  message: ""
});

$("#profile-form").on("submit", perform (occasion) {
  occasion.preventDefault();

  var $type = $(this);

  $.ajax({
    url: "/account/profile",
    sort: "POST",
    knowledge: $type.serialize()
  }).accomplished(perform () {
    // Rebuild the discover with a success-style data message.
    $profileStatus.message("choices", {
      sort: "data",
      message: "Profile adjustments saved."
    });

    $profileStatus.message("present");
  }).fail(perform () {
    // Change the message to the error fashion.
    $profileStatus.message("choices", {
      sort: "error",
      message: "The profile replace failed. Verify the shape and take a look at once more."
    });

    $profileStatus.message("present");
  });
});
</script>

Create A Persistent Validation Message

<div id="checkout-error"></div>

<script>
$("#checkout-error").message({
  sort: "error",
  dismiss: false,
  message:
    "<sturdy>Cost couldn't be submitted.</sturdy><br>" +
    "Verify the cardboard quantity and billing ZIP code."
});
</script>

The message choice accepts HTML. Maintain dynamic values escaped or sanitized earlier than they attain this feature.

Replace A Message From Dynamic Knowledge

<div id="import-status" fashion="show:none"></div>

<button id="check-import" sort="button">
  Verify Import Standing
</button>

<script>
var $importStatus = $("#import-status").message({
  autoShow: false,
  dismiss: false,
  message: ""
});

perform escapeMessage(worth) {
  // Convert textual content into HTML-safe content material.
  return $("<div>").textual content(worth).html();
}

$("#check-import").on("click on", perform () {
  $.getJSON("/api/import-status")
    .accomplished(perform (response) {
      var isSuccessful = response.standing === "full";

      $importStatus.message("choices", {
        sort: isSuccessful ? "data" : "error",
        message: escapeMessage(response.message)
      });

      $importStatus.message("present");
    })
    .fail(perform () {
      $importStatus.message("choices", {
        sort: "error",
        message: "The import standing request failed."
      });

      $importStatus.message("present");
    });
});
</script>

Options And Associated Sources

• Bootstrap 5 Notify: Provides growl-style Bootstrap 5 notifications with placement controls, progress bars, callbacks, and animation choices.
• BootstrapAlert: Creates Bootstrap 5 notification bars with a number of alert kinds, icons, timed dismissal, and callbacks.
• BS-Alerts: Makes use of jQuery occasions and HTML knowledge attributes for Bootstrap warning, error, data, and success messages.

This superior jQuery plugin is developed by jrummell. For extra Superior Usages, please test the demo web page or go to the official web site.