Dijit Widgets on same page

Question

Newstarter in Dijit. I want to have a page were multimple dialogs will co-exist in the same page. After writing this:

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>widgets</title>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css" media="screen">
    <style>
        #dialog { min-width: 300px; }
    </style>
    <!-- load dojo and provide config via data attribute -->
    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js"
            data-dojo-config="has:{'dojo-debugging-messages':true}, parseOnLoad: false, foo: 'bar', async: true">

    </script>
            <script>
            function load_widgets()
            {
                    similar_users_widget();
                    in_silico_widget();

                    require([ "dijit/focus" ], function(focusUtil){
                      var activeElement = focusUtil.curNode; // returns null if there is no focused element
                      alert(activeElement);
                    });                        
            }

            function in_silico_widget()
            {
                // Require the registry, parser, Dialog, and wait for domReady
                require(["dijit/registry", "dojo/parser", "dijit/Dialog", "dojo/domReady!",'dojo/_base/json'], function(registry, parser)
                {
            dojo.parser.parse();
            var dialog = registry.byId("in_silico_dialog");
                            var content = "Another widget";

            dialog.set("content", '<pre>' + 'Test<br>' + content + '</pre>');
            dialog.show();
                });
            }

            function similar_users_widget()
            {
                var json;

                require(["dojo/_base/xhr"], function(xhr)
                {
                    // get some data, convert to JSON
                    xhr.get({
                        url:"http://localhost:8080/DojoPlay/SocialNetworkAnalysis?op=retrieve_similar_users",
                        handleAs:"json",
                        load: function(data){
                           json = data;
                        }
                    });
                });

                // Require the registry, parser, Dialog, and wait for domReady
                require(["dijit/registry", "dojo/parser", "dijit/Dialog", "dojo/domReady!",'dojo/_base/json'], function(registry, parser)
                {
            dojo.parser.parse();
            var dialog = registry.byId("similar_users_dialog");
                            var content = "";

                            var h = json.people[0];
                            for (var k in h) {
                                // use hasOwnProperty to filter out keys from the Object.prototype
                                if (h.hasOwnProperty(k)) {
                                    content+="key is: " + k + ", value is: " + h[k] + "\n";
                                }
                            }

            dialog.set("content", '<pre>' + 'Test<br>' + content + '</pre>');
            dialog.show();
                });
            }

            require([ "dijit/focus" ], function(focusUtil){
              var handle = focusUtil.watch("curNode", function(name, oldValue, newValue){
                console.log("Focused node was", oldValue, "now is", newValue);
             });
            });

    </script>
</head>
    <body class="claro" onload="load_widgets();">
    <h1>Demo: widgets</h1>
    <div id="similar_users_dialog" data-dojo-type="dijit.Dialog" data-dojo-props="title: 'User suggestions'"></div>
    <div id="in_silico_dialog" data-dojo-type="dijit.Dialog" data-dojo-   props="title: 'In-silico dialog'"></div>                
</body>
</html>

The page loads fine, but the first widget loads on top of the other, and I cannot click the second one. Only when closing the first one, the page focuses on the same widget (and I can then use it).

Can I have both widgets somehow loaded and able to use without closing either one of them? Thanks you all

Answer 1

its not so much the focus, more a 'problem' with z-indexes. A dialog is modal and does not expect any other to have focus at same time so it raises itself ontop of an underlay which you cannot click through.

Consider this fiddle and mess with it: http://jsfiddle.net/seeds/Z8Afg/2/

You should be able to use following code whenever you call .show() on a dialog. Only thing you need is to know which are 'dia1' and 'dia2';

var dia1 = registry.byId("similar_users_dialog");
var dia2 = registry.byId("in_silico_dialog");
dia1.show()    
dia2.show();
var index1 = dojo.style(dia1.domNode, "zIndex");
var index2 = dojo.style(dia2.domNode, "zIndex");
var lowerindex = Math.min(parseInt(index1), parseInt(index2));
console.log('indexes:', index1, index2, lowerindex)
// get underlay from dialog which is topmost (the latter .show() call)
underlay = dojo.byId(dia2.underlayAttrs.dialogId + dia2.underlayAttrs["class"]).parentNode;
// set underlay zIndex to 1 lower then the minimum (first dialog to receive .show() call)
dojo.style(underlay, "zIndex", lowerindex - 1)

Dijit Widgets on same page

Question

1 answers

solution1
0 2012-05-13 10:33:28

Dijit Widgets on same page

Question

1 answers

solution1 0 2012-05-13 10:33:28

solution1
0 2012-05-13 10:33:28