CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstraptwitter-bootstrap-3
Hritik Gupta
Hritik Gupta

Reputation: 73

Bootstrap Alert wonts show again

On form submission, I get an alert in the first iteration, but the alert wont appear again on submission of the form (after closing it before). What could possibly go wrong? I had tried the following: 

<div id="messages" class="hide" role="alert">
      <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      <div id="messages_content"></div>
</div>

Script

$('#myform').submit(function(e) {
    $('#messages').removeClass('hide').addClass('alert alert-success alert-dismissible').slideDown().show();
    $('#messages_content').html('<h4 class="usefont" style="text-align: center">Thank you message!</h4>');
    $('#modal').modal('show');
    e.preventDefault();
});

Upvotes: 2

Views: 631

Answers (1)

Naren Murali
Naren Murali

Reputation: 58439

This is my solution, you need to remove the data-dismiss attribute, and implement a hide function inside the close button.

The problem was data-dismiss was removing the element from the DOM completely!

$('#myform').on('submit', function(e) {
  $('#messages').removeClass('hide').addClass('alert alert-success alert-dismissible').slideDown();
  $('#messages_content').html('<h4 class="usefont" style="text-align: center">Thank you message!</h4>');
  $('#modal').modal('show');
  e.preventDefault();
});

$('#close').on('click', function(e) {
  $('#messages').removeClass('alert alert-success alert-dismissible').addClass('hide').slideUp().hide();
  $('#messages_content').html('');
  $('#modal').modal('show');
  e.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div id="messages" class="hide" role="alert">
  <button type="button" id="hide" class="close" aria-label="Close"><span id="close">&times;</span></button>
  <div id="messages_content"></div>
</div>
<form action="" id="myform">
  <button type="submit">submit</button>
</form>

Upvotes: 1

Related Questions