CODEWITHSUNDEEP
javascriptajaxbootstrap-4
Pat
Pat

Reputation: 509

Bootstrap alert : how to just 'hide' them without removing them when closing?

I'm using bootstrap 4 Alerts to display error messages, etc. such as their demo:

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

I'm also using AJAX calls to do form POSTs.

Problem I'm having is that if a user posts, the error message will show up, but if user clicks on the close button and re-posts, if an error happens, because he previously closed the previous error, I cannot unhide the alert container with a d-block because it simply no longer exists in the DOM / Page. The DIV element was destroyed, or at least, I cannot see it in the Chrome's developer tools.

How could I fixe this so that my close button simply 'hides' the container, instead of destroying it or whatever it does? I need to be able to re-show it even after user closed.

Cheers! Pat

Upvotes: 3

Views: 1247

Answers (3)

Dima L.
Dima L.

Reputation: 3583

Replace data-dismiss="alert" with onclick="$(this).closest('.alert').hide()":

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="close" onclick="$(this).closest('.alert').hide();" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

Upvotes: 0

Pat
Pat

Reputation: 509

Ended up replacing data-dismiss="alert" with an onClick="$('#idOfDiv').addClass('d-none');" type of solution...

Cheers for your help! Pat

Upvotes: 2

oxygen
oxygen

Reputation: 1

Did you try using a bit of jQuery or Javascript ?

Maybe adding some "arrow" icon on the top corner. Then, dividing your alert into two sections : one is a thin strip that remains permanently and the other one which is "toggling" when clicked

Upvotes: 0

Related Questions