Post
Ask Question

Confirm Box in TypeScript

Introduction

 
A TypeScript confirm box is the same as a TypeScript alert box. It is a way to ensure your users explicitly confirm an action. It supplies the user with a choice; they can either press "Ok" to confirm the popup's message or they can press "Cancel" and not agree to the popup's request.
 
The following example shows how to use and show a confirm box in TypeScript.
 
Step 1
Open Visual Studio 2012 and click "File" -> "New" -> "Project...". A window is opened. In this window, click "HTML Application for TypeScript" under Visual C#.
 
Give the name of your application as "ConfirmBox" and then click "Ok".
 
Step 2
After this session the project has been created; a new window is opened on the right side. This window is called the Solution Explorer. The Solution Explorer contains the ts file, js file, CSS file, and aspx files.
 
Coding
 

ConfirmBox.ts

  1. class ConfirmBox {  
  2.  show() {  
  3.   var c = confirm("Are you sure you want to do that?");  
  4.   var status = document.getElementById("content");  
  5.   if (c == true) {  
  6.    status.innerHTML = "You confirmed, thanks";  
  7.   } else {  
  8.    status.innerHTML = "You cancelled the action";  
  9.   }  
  10.  }  
  11. }  
  12. window.onload = () => {  
  13.  var bttn = < HTMLButtonElement > document.getElementById("Button1");  
  14.  bttn.onclick = function() {  
  15.   var obj = new ConfirmBox();  
  16.   obj.show();  
  17.  }  
  18. };   

ConfirmBox_Demo.htm

  1. < !DOCTYPEhtml >  
  2.  <  
  3.  htmllang = "en"  
  4. xmlns = "http://www.w3.org/1999/xhtml" >  
  5.  <  
  6.  head >  
  7.  <  
  8.  metacharset = "utf-8" / >  
  9.  <  
  10.  title > TypeScript HTML App < /title>  
  11.  <  
  12.  linkrel = "stylesheet"  
  13. href = "app.css"  
  14. type = "text/css" / >  
  15.  <  
  16.  scriptsrc = "app.js" > < /script>  
  17.  <  
  18.  styletype = "text/css" >  
  19.  #Button1 {  
  20.   height: 41 px;  
  21.  }  
  22.  <  
  23.  /style>  
  24.  <  
  25.  /head>  
  26.  <  
  27.  body >  
  28.  <  
  29.  h2 > ConfirmBox in TypeScript HTML App < /h2>  
  30.  <  
  31.  inputid = "Button1"  
  32. type = "button"  
  33. value = "Perform Action" / >  
  34.  <  
  35.  divid = "content" / >  
  36.  <  
  37.  /body>  
  38.  <  
  39.  /html>  

app.js

  1. var ConfirmBox = (function() {  
  2.  function ConfirmBox() {}  
  3.  ConfirmBox.prototype.show = function() {  
  4.   var c = confirm("Are you sure you want to do that?");  
  5.   var status = document.getElementById("content");  
  6.   if (c == true) {  
  7.    status.innerHTML = "You confirmed, thanks";  
  8.   } else {  
  9.    status.innerHTML = "You cancelled the action";  
  10.   }  
  11.  };  
  12.  return ConfirmBox;  
  13. })();  
  14. window.onload = function() {  
  15.  var bttn = document.getElementById("Button1");  
  16.  bttn.onclick = function() {  
  17.   var obj = new ConfirmBox();  
  18.   obj.show();  
  19.  };  
  20. };  
Output 1
 
 first-image.jpg
 
Output 2
 
After clicking on the "Ok" button:
 
click-ok-image.jpg
 
Output 3
 
Click on "Cancel":
 
cancel-message-image.jpg
 
Referenced By
http://www.typescriptlang.org/


Similar Articles