CODEWITHSUNDEEP
dojodialog
Paul Angelno
Paul Angelno

Reputation: 481

How to open Dojo dialog from another dialog

I'm having trouble opening a dijit.Dialog from another dijit.Dialog. I've seen other posts here suggesting that it works fine as of Dojo version 1.5, but I'm using Dojo 1.6.1 and not having much luck. The Dojo documentation at http://dojotoolkit.org/documentation/tutorials/1.7/dialogs_tooltips/ seems to suggest that this is supported where it says, "One important fact to know about dijit/Dialog is that instances are added to a "stack" so that you may have instances on top of one another."

When I call show() on a second dialog from one that is currently shown, the second dialog is barely visible for a moment and then the browser refreshes, leaving just the first dialog shown.

Here's a simple example:

<html>
<head>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dijit/themes/claro/claro.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js" djConfig="parseOnLoad: true"></script>
    <script type="text/javascript">
        dojo.require("dijit.dijit");
        dojo.require("dijit.Dialog");
        dojo.ready(function () {
            dijit.byId("dialog1").show();
        });
    </script>
</head>
<body class="claro">

    <div data-dojo-type="dijit.Dialog" id="dialog1" data-dojo-props="title:'Dialog 1'">
        I'm dialog 1
        <a href="" onclick="dijit.byId('dialog2').show();">Open dialog 2</a>
    </div>

    <div data-dojo-type="dijit.Dialog" id="dialog2" data-dojo-props="title:'Dialog 2'" style="visibility:hidden;">
        I'm dialog 2
    </div>

</body>
</html>

I have a feeling I'm missing something simple. Can anybody help me out? Ideally dialog1 would stay in the background while dialog2 appears on top of it as a modal dialog.

Upvotes: 0

Views: 1883

Answers (1)

mschr
mschr

Reputation: 8641

You have an anchor tag, it fires a document.location.href = "" since the onclick returns true.

See following: Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?

Correct to 

<a href="javascript:void(0); " 
       onclick="dijit.byId('dialog2').show(); return false ">
                                        <!-- note 'false' -->
 Open dialog 2</a>

If the onclick returns a true (the .show() does that) , then the expected behavior of an <a> is to be expected, youre clicking a link that will bring you to another page. While the hrefis a blank, then same page is reloaded.

Upvotes: 1

Related Questions