Friday, January 24, 2020

How to show a Bootstrap Alert by clicking a button

In this tutorial we'll learn how to show a Bootstrap Alert by clicking a button . 

https://github.com/CarmelSchvartzman/BOOTSTRAP/blob/master/ALERT/ALERT_BY_BUTTON






How to show a Bootstrap Alert by clicking a button 



We create a new HTML webpage, 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>

</head>
<body>

<div class="container">
<div class='jumbotron'>
<h3>Open an Alert by clicking this button</h3>
<button class='btn btn-info btn-sm'  data-target='#myalert' data-toggle='modal'>Alert</button> 


<div class='modal' id='myalert'> 
  <div class='modal-dialog'>
    <div class='alert alert-info alert-dismissible'  >      <<<<<<<<<<<   DO NOT SET "FADE" !
      <strong>This is an alert opened by a button</strong>
      <button class='close' data-dismiss='modal'><span class='glyphicon glyphicon-cloud'></span></button>

    </div>
  </div>
</div>

</div>
</div>
</body>
</html>

Pay attention to the code marked bold . Tha't the important part.

That's all.... 
In this tutorial we've seen how to show a Bootstrap Alert by clicking a button  
Happy programming.....
      By Carmel Shvartzman
כתב: כרמל שוורצמן











Posted by No comments:
Labels: , ,

Friday, January 10, 2020

Calling a JS Promise for display in a showable Bootstrap Alert


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 Alert
Happy programming.....
      By Carmel Shvartzman
כתב: כרמל שוורצמן


















Posted by No comments:
Labels: , ,
Subscribe to: Posts (Atom)