Wednesday, March 26, 2014

Dojo Confirm Box

A simple dojo confirm box

We will create a simple dojo confirm box. Confirm box will have "Yes" and "No" buttons. We can define actions for Yes/No buttons and also we can add custom message and title for confirm box.
Have a look to following html and js file to get a dojo confirm box.

HTML file:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Dojo Confirm Box Example</title>
<link rel="stylesheet" href="../js/1_8_3/dijit/themes/claro/claro.css">
<style type="text/css">
@import "../js/1_8_3/dojo/resources/dojo.css";
@import "../js/1_8_3/dijit/themes/claro/claro.css";
@import "../js/1_8_3/dijit/themes/claro/document.css";
@import "../js/1_8_3/dojox/grid/enhanced/resources/claro/EnhancedGrid.css";
@import "../js/1_8_3/dojox/grid/enhanced/resources/EnhancedGrid_rtl.css";
</style>
<script>dojoConfig = {parseOnLoad: true}</script>
    <script src='../js/1_8_3/dojo/dojo.js'></script>
    <script src='../js/confirm.js'></script>
</head>
<body class="claro">
<div style="width:450px;height:200px;margin-left:200px;">
<br>
<a href='#' onClick="openConfirmBox();">Open Confirm Box</a>
</div>
</body>
</html>

Js file - confirm.js


/**
     * confirmation dialog box.
     */
  function openConfirmBox() {
       
      require(["dojo/ready", "dojox/widget/DialogSimple",
               "dijit/form/Button"
           ],
          
               function(ready, 
                   Dialog,Button ){
                   ready(function(){
            var confirmBox = new dojox.widget.DialogSimple({
                title: "Confirm Box",
                style: "width: 275px;height:auto; font-weight:bold",
                content: "<div>Click Yes to confirm.<br/>"
               
            });
           
            var div = dojo.create('div', {
                id:"btn"
            }, confirmBox.containerNode);

            var noBtn = new dijit.form.Button({
                label: "NO",
                onClick: function() {
                    //action for no button
                    confirmBox.hide();                   
                    dojo.destroy(confirmBox);
                }
            });

            var yesBtn = new dijit.form.Button({
                label: "YES",
                onClick: function() {
                    //call action for Yes
                    confirmBox.hide();
                    dojo.destroy(confirmBox);
            }

            });
           
            dojo.create(yesBtn.domNode, {}, div);
            dojo.create(noBtn.domNode, {}, div);       
            confirmBox.show();
                   });
      });
    }

Confirm Box :



No comments:

Post a Comment