Sponsered Links
Categories
Sponsered Links

Introduction to the Dojo Toolkit Tutorial

 

In this example we load the file dojo.js in which dojo.require function is defined. Then we call the other require function which we need in our page. dojo.widget.* wildcards loader is used to load whole package at a time. Follow the program below:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
        <head>
            <title>Dojo Example, Dojo Source code, Dojo First Example</title>
                 <script type="text/javascript" src="dojo.js"></script>
                 <script type="text/javascript">
                    dojo.require("dojo.widget.*");
                 </script>
                 <script>

                    var dlg;
                    function getResults(evt)
                    {
                         var name = dojo.byId("inputname").value;
                         dojo.byId("namediv").innerHTML = "<b>"+name+"</b>";
                    }

                    function init(e)
                    {
                        dlg = dojo.widget.byId("DialogContent");
                        dojo.event.connect("hider", "onclick", "getResults");
                    }
                    dojo.addOnLoad(init);
                </script>
        </head>
        <body>
            <a href="javascript:dlg.show()">Show Dialog</a><br><br>Name:<div id="namediv">None</div>
            <div dojoType="dialog" id="DialogContent" bgColor="grey" bgOpacity="0.5" toggle="fade" toggleDuration="250" closeNode="hider">
            <h4>First Dialog</h4>
            <form onsubmit="return false;">
                <table>
                    <tr>
                        <td>Name:</td>
                        <td><input type="text" id="inputname"></td>
                    </tr>
                    <tr>
                        <td>Description:</td>
                        <td><input type="text"></td>
                    </tr>
                    <tr>
                        <td>Location:</td>
                        <td><input type="file"></td>
                    </tr>
                    <tr>
                        <td colspan="2" align="center"> <input type="button" id="hider" value="OK"></td>
                    </tr>
                </table>
            </form>
        </div>
        </body>
    </html>

 
 
Sponsered Links
Latest Updates
 
All Content of this site is for learning only. We do not warrant the correctness of its content. The risk from using it lies entirely with the user. While using this site, you agree to have read and accepted our terms of use and privacy policy.
Copyright © 2009 JSPSERVLETTUTORIAL.INFO All Right Reserved