Reader Level:
ARTICLE

Confirm Box in TypeScript

Posted by Nitin Bhardwaj Articles | TypeScript December 21, 2012
In this article I explain how to use a confirm box in TypeScript with an example.
  • 0
  • 0
  • 3066

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 show 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

class ConfirmBox

{

    show()

    {

        var c = confirm("Are you sure you want to do that?");

        var status = document.getElementById("content");

        if (c == true)

        {     

            status.innerHTML = "You confirmed, thanks";

        }

        else

        {

            status.innerHTML = "You cancelled the action";

        }

    }

}

window.onload = () =>

{

    var bttn = <HTMLButtonElement>document.getElementById("Button1");

    bttn.onclick = function ()

    {

        var obj = new ConfirmBox();

        obj.show();

    }

};

 

ConfirmBox_Demo.htm

<!DOCTYPEhtml>

<htmllang="en"xmlns="http://www.w3.org/1999/xhtml">

<head>

    <metacharset="utf-8"/>

    <title>TypeScript HTML App</title>

    <linkrel="stylesheet"href="app.css"type="text/css"/>

    <scriptsrc="app.js"></script>

    <styletype="text/css">

        #Button1 {

            height:41px;

        }

    </style>

</head>

<body>

    <h2>ConfirmBox in TypeScript HTML App</h2>

    <inputid="Button1"type="button"value="Perform Action"/>

    <divid="content"/>

</body>

</html>

 

app.js

var ConfirmBox = (function () {

    function ConfirmBox() { }

    ConfirmBox.prototype.show = function () {

        var c = confirm("Are you sure you want to do that?");

        var status = document.getElementById("content");

        if(c == true) {

            status.innerHTML = "You confirmed, thanks";

        } else {

            status.innerHTML = "You cancelled the action";

        }

    };

    return ConfirmBox;

})();

window.onload = function () {

    var bttn = document.getElementById("Button1");

    bttn.onclick = function () {

        var obj = new ConfirmBox();

        obj.show();

    };

};

//@ sourceMappingURL=app.js.map

 

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

 

Reference By

http://www.typescriptlang.org/

COMMENT USING

Trending up