Dojo Dialog error in Zend Framework

Question

I'm trying to create a Dojo dialog in Zend Framework but I've run into some problems. My view code looks something like this:

<script type="text/javascript" src="<?= $this->baseUrl('/js/dojo-release-1.7.2/dojo/dojo.js')?>"
          data-dojo-config="async: true" dojoConfig = "parseOnLoad: true">
</script>
<script>       
    require(["dijit/registry", "dojo/ready", "dojo/dom", "dijit/Dialog", "dijit/form/Form"], 
    function(registry, ready, dom, Dialog){
        ready(function() {
           createDialog = function(titleText, contentText) {
              var node = dojo.byId("foobar"); 
              var myDialog = new Dialog({ title:"From Source Node" }, node);   
              myDialog.show();
           };
        });
    });
</script>
<body class="claro">
   <div data-dojo-type="dijit/Dialog" id="foobar"  title="Foo!" style="display: none">
     <p>I am some content</p>
   </div>
</body>

The button code that loads the dialog looks as follows:

<button name="btnDialog" id="dialogbtn" type="button" onclick='createDialog();'>Open</button>

The first time the button is clicked the dialog opens as expected, but once the dialog is closed and the button is clicked again, the dialog doesn't open and I get the following error in the console.

Tried to register widget with id==foobar but that id is already registered.

What am I doing wrong?

Thanks

Ashraf Abrahams Ashraf Abrahams · Accepted Answer · 2012-11-03T09:33:08

Figured it out. I think the form wasn't parsing correctly because the dojo-config was incorrect. Changed the javascript code as follows:

<script type="text/javascript" src="<?= $this->baseUrl('/js/dojo-release-1.7.2/dojo/dojo.js')?>"
          data-dojo-config="async: true, parseOnLoad:true">
</script>
<script>
    require(["dijit/registry", "dijit/Dialog"], function (registry)
    {
       createDialog = function createDialog()
       {
            registry.byId("foobar").show();
       }
    });
</script>

and the div as follows:

<body class="claro">
  <div class="dijitHidden">
     <div data-dojo-type="dijit.Dialog" data-dojo-props="title:'Foo!'" id="foobar">
         <p>I am some content</p>
     </div>
  </div>
</body>

and now the dialog dijit is saved to the registry and it's working as expected

Dojo Dialog error in Zend Framework

1 Answers