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.
Reader Level:

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/

Login to add your contents and source code to this article
post comment
     
COMMENT USING
PREMIUM SPONSORS
Over-C is a holistic consortium of communications and technology specialists. We build, deploy and market both business as well as consumer products and solutions.
Join a Chapter
SPONSORED BY
  • PDF reports have never been easier to create. With our included WYSIWYG Designer, you can layout your reports, set up your data source and let DynamicPDF ReportWriter do the rest.
Get Career Advice from Experts