Bootstrap warning gets blurry and disappears when created in ajax success () function
I want to show Bootstrap warning when ajax returns. But the warning flashed and then disappeared very quickly. What is the correct way to show a warning using Bootstrap? thank.
$('#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">×</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>
source to share
I finally find the problem. I change the button (which runs the js code) like "submit" -> "button" and everything works fine.
I do not yet know why it is.
<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>
source to share
I would have done it differently, you can directly place a warning message in HTML-format 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">×</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">×</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 javascript you don't need this 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 that you are modifying your css file and not showing any divs warnings:
#alertError,#alertSuccess{
display:none;
}
source to share
With fadeIn property Or you can use "addClass" "to animate the bootstrap div.
If you only want an animated alert.
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">×</span></button>' + message + '</div>');
setTimeout(function() {
$("#alertdiv").remove();
}, 5000);
}
source to share