CODEWITHSUNDEEP
javascriptjqueryajaxtwitter-bootstrapalert
chunguang qu
chunguang qu

Reputation: 85

Bootstrap alert flushed and disappear when create in ajax success() function

I want to show alert of Bootstrap when ajax returns. But the alert flushed and then disappear very quickly. What is the right way to show an alert with Bootstrap? thanks.

$('#btn').click(function () {
    var url = "add";
    var data = $('#add_form').serializeArray().reduce(function(m,o){ m[o.name] = o.value; return m;}, {});
    $.ajax({
        type: 'POST',
        url: url,
        data: JSON.stringify(data),
        dataType: 'json',
        contentType : 'application/json',
        // async: false,
        success: function(data2) {
           if (data2.res == 1) {
                showalert("Error", "alert-danger");
           } else {
                showalert("OK", "alert-success");
           }
        },
        error: function(result)
        {
        },
        timeout: 5000
    });
});
function showalert(message, alerttype) {
    $('#alert_placeholder').append('<div id="alertdiv" class="alert ' +  alerttype + '" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>' + message + '</div>');
    setTimeout(function() {
        $("#alertdiv").remove();
    }, 5000);
 }
<div id = "alert_placeholder"></div>
...
<form id="add_form" method="post">
...
  <div class="form-group row">
      <div class="offset-2 col-10">
      <!-- <button type="submit" id="btn" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Submit</button> -->
      <button type="submit" id="btn" class="btn btn-primary">Submit</button>
      </div>
  </div>

Upvotes: 3

Views: 2718

Answers (4)

user2712582
user2712582

Reputation: 1

  <div class="form-group row">
      <div class="offset-2 col-10">
      <!--<button type="submit" id="btn" class="btn btn-primary">Submit</button>-->
      <button type="button" id="btn" class="btn btn-primary">Submit</button>
      </div>
  </div>

Upvotes: 0

chunguang qu
chunguang qu

Reputation: 85

I find the problem at last. I changes the button's (which is trigger the js code) type "submit"->"button", and everything works well.

I am not sure why that way yet.

  <div class="form-group row">
      <div class="offset-2 col-10">
      <!--<button type="submit" id="btn" class="btn btn-primary">Submit</button>-->
      <button type="button" id="btn" class="btn btn-primary">Submit</button>
      </div>
  </div>

Upvotes: 1

Mohit Kumar
Mohit Kumar

Reputation: 36

With fadeIn Property Or You Can Use ""addClass"" to animate bootstrap div .

If you want Only animated alert box.

function showalert(message, alerttype) {
    $('#alert_placeholder').fadeIn('<div id="alertdiv" class="alert ' +  alerttype + '" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>' + message + '</div>');
    setTimeout(function() {
        $("#alertdiv").remove();
    }, 5000);
 }

Upvotes: 0

SilverSurfer
SilverSurfer

Reputation: 4366

I would do it different, you can put directly the alert message in yout HTML and play with show(), hide(), fadeIn() or fadeOut():

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

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

...
<form id="add_form" method="post">
...
  <div class="form-group row">
      <div class="offset-2 col-10">
      <!-- <button type="submit" id="btn" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Submit</button> -->
      <button type="submit" id="btn" class="btn btn-primary">Submit</button>
      </div>
  </div>

And now in the javascript you dont need that function, remember put $(document).ready:

$(document).ready(function () {
$('#btn').click(function () {
    var url = "add";
    var data = $('#add_form').serializeArray().reduce(function(m,o){ m[o.name] = o.value; return m;}, {});
    $.ajax({
        type: 'POST',
        url: url,
        data: JSON.stringify(data),
        dataType: 'json',
        contentType : 'application/json',
        // async: false,
        success: function(data2) {
           if (data2.res == 1) {
                $(#alertError).show() //or fadeIn
                setTimeout(function() {
                  $("#alertError").hide(); //or fadeOut
                }, 5000);
           } else {
                $(#alertSuccess).show() //or fadeIn
                setTimeout(function() {
                  $("#alertSuccess").hide(); //or fadeOut
                }, 5000);
           }
        },
        error: function(result)
        {
        },
        timeout: 5000
    });
 })
});

Remember change your css file and display none alerts divs:

#alertError,#alertSuccess{
    display:none;
}

Upvotes: 1

Related Questions