Jquery – How to toggle a bootstrap alert on and off with button click

jqueryjquery-uitwitter-bootstrap

I want to display an alert box multiple times with a button click event without having to refresh the page but the alert box only shows up once. If I want to show the alert box again, I have to refresh page.

Currently if you render a bootstrap alert on the page, when you close it, the div container of the alert is gone from the page. So when you click the button again, it doesn't show up anymore. I have been doing the following on the close button to make it hide instead of delete the div container of alert.

<button class="close" onclick="$('#alertBox').hide();; return false;">×</button>

I wonder if using data-toggle or data-dismiss in bootstrap can make this sort of toggle effect working without going through my own custom Javascript handlers.

Best Answer

I've had the same problem: just don't use the data-dismiss from the close button and work with JQuery show() and hide():

$('.close').click(function() {
   $('.alert').hide();
})

Now you can show the alert when clicking a button by using the code:

$('.alert').show()

Hope this helps!

Related Solutions

Javascript – How to detect a click outside an element

Note: Using stopPropagation is something that should be avoided as it breaks normal event flow in the DOM. See this CSS Tricks article for more information. Consider using this method instead.

Attach a click event to the document body which closes the window. Attach a separate click event to the container which stops propagation to the document body.

$(window).click(function() {
  //Hide the menus if visible
});

$('#menucontainer').click(function(event){
  event.stopPropagation();
});

Javascript – How to know which radio button is selected via jQuery

To get the value of the selected radioName item of a form with id myForm:

$('input[name=radioName]:checked', '#myForm').val()

Here's an example:

$('#myForm input').on('change', function() {
   alert($('input[name=radioName]:checked', '#myForm').val()); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
  <input type="radio" name="radioName" value="1" /> 1 <br />
  <input type="radio" name="radioName" value="2" /> 2 <br />
  <input type="radio" name="radioName" value="3" /> 3 <br />
</form>

Best Answer

Related Solutions

Javascript – How to detect a click outside an element

Javascript – How to know which radio button is selected via jQuery

Related Topic