CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
Mark
Mark

Reputation: 5038

Bootstrap alert doens't show with jQuery

Perhaps I missed something in the documentation:

http://getbootstrap.com/components/#alerts

I want to show an Alert (in the Bootstrap sense) with jQuery when a button is clicked. Here a simple snippet:

$("#btnAlert").click(function() {
  $("#success-alert").show();
});
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<div class="alert alert-success alert-dismissible hide" id="success-alert" role="alert">
  <strong>Success! </strong>
</div>

<button type="button" class="btn btn-primary" id="btnAlert">Show</button>

It doesn't work. Removing the hide class the alert will stay visible, but of course is not what I want.

What am I missing?

Upvotes: 0

Views: 99

Answers (2)

Yury Tarabanko
Yury Tarabanko

Reputation: 45121

Removing class hide on click should work.

$("#btnAlert").click(function() {
  $("#success-alert").removeClass('hide');
});
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<div class="alert alert-success alert-dismissible hide" id="success-alert" role="alert">
  <strong>Success! </strong>
</div>

<button type="button" class="btn btn-primary" id="btnAlert">Show</button>

Upvotes: 1

A.Sri
A.Sri

Reputation: 311

try this....

$("#btnAlert").click(function() {
  $("#success-alert").show();
});
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<div class="alert alert-success alert-dismissible" style="display:none" id="success-alert" role="alert">
  <strong>Success! </strong>
</div>

<button type="button" class="btn btn-primary" id="btnAlert">Show</button>

Upvotes: 2

Related Questions