In this tutorial we'll learn how to call a JS Promise for display in a showable Bootstrap Alert .
Step by step how to call a JS Promise for display in a showable Bootstrap Alert
We create a new HTML webpage , using the CDN from JQUERY and Bootstrap (that is only for displaying an Alert), as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script>
$(()=>{
///// the JS Promise :
const fnPromise = (msg)=>{
return new Promise((resolve,reject)=>{
if(msg !== null && msg.length > 0) resolve('<strong> Success : </strong> ' + msg);
else reject('Bad request');
});
}
$('button').on({'click':()=>{
fnPromise('This alert box indicates a successful calling to a Promise method.').then((ret)=>{
$('#spanMsg').html(ret);
}, (error)=>{$('#spanMsg').html(error); });
}});
});
</script>
</head>
<body>
<div class="container">
<h2>Showing Alerts with a click</h2>
<p>This is an showable Alert including the call to a JavaScript Promise</p>
<button class='btn btn-info' data-target='#a1' data-toggle='modal' >Open Alert</button>
<div class='modal' id='a1'>
<div class='modal-dialog'>
<div class="alert alert-warning alert-dismissible" >
<a href="#" class="close" data-dismiss="modal" aria-label="close"><span class='glyphicon glyphicon-check'></span></a>
<span id='spanMsg'></span>
</div>
</div>
</div>
</div>
</body>
</html>
That's all....
In this tutorial we've seen how to call a JS Promise for display in a showable Bootstrap AlertHappy programming.....
By Carmel Shvartzman
כתב: כרמל שוורצמן
No comments:
Post a Comment