1

I'm using dojo tabs in a php file. When the php file is first written to the browser the tabs show up as regular divs in a big mess. Then a second later they are fixed nicely into tab form. It's been a while since I looked into dojo and at the time it was written it was using 1.6 using links to online versions of dojo.

Is there some reason that this would happen. Something not ready or something not loaded first?

the php code echos this html: 

<div dojoType='dijit.layout.TabContainer'><div dojoType='dijit.layout.ContentPane' title='Words' selected='true'>some html</div></div>...etc

I have this javascript in the header of the php file to echo this html first.

<script src='http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js' djConfig='parseOnLoad: true'></script><script>dojo.require('dijit.Tooltip');dojo.require('dijit.layout.TabContainer');dojo.require('dijit.layout.ContentPane');</script><link rel='stylesheet' type='text/css' href='http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css'/>;
techdog
  • 1,451
  • 3
  • 19
  • 38
  • What you are seeing is what the html looks like before the dojo parser kicks in and turns the tagged data into widgets. you might want to keep the content hidden until dojo.ready when you know the parser has done its job. – tik27 Mar 31 '14 at 12:42
  • I'll try that. Thanks. Do you think it has anything to do with the fact that I'm loading the api's from the web instead of locally? – techdog Mar 31 '14 at 16:00
  • Actually it just occurred to me that I'd have to check dojo.ready continuously. I'm surprised I would have to do this all manually. – techdog Mar 31 '14 at 16:15
  • Probably, there is a lag time on downloading the dojo js files before the parser starts. usually you only have to check the dojo.ready once, unless you are loading a new page(no ajax) and the js files have to load again. – tik27 Mar 31 '14 at 16:56
  • I'll try to make the files local and also add the dojo.ready javascript. Thanks for the tips. – techdog Mar 31 '14 at 18:30
  • I tried that. I have a script at the end that changes the dojo divs to display=block from display=none. The code works because I put up an alert to check. But I still get the same result. Should I try a newer version of dojo? – techdog Mar 31 '14 at 19:12
  • you can try running the parser manually:: in the dojo ready run dojo.parser.parse().then(function(){//ShowDiv}) – tik27 Apr 01 '14 at 21:26

1 Answers1

0

I just encountered the exact same problem and came up with the following workaround. In the <head> section of my Layout (layout.phtml – I'm using Zend Framework 1.12) I added the following JavaScript function

<script type="text/javascript" language="JavaScript">
    function pageLoaded() {
        document.getElementById("body-loading").style.display = "none";
        document.getElementById("body-content").style.visibility = "visible";
        dojo.style("view-content", "visibility", "visible");
    }
</script>

and tweaked the <body> section with an onLoad attribute and a couple of <div>s

<body class="<?php echo $dijit_theme ?>" onLoad="Javascript:pageLoaded();">
<div id="body-loading" style="visibility: visible;">loading...</div>
<div id="body-content" style="visibility: hidden;"> 
<?php echo $this->layout()->content ?>
</div>
</body>

So I see the "loading..." text until the Dojo stuff is completely rendered, then the "loading..." message disappears and the form appears.

I tested this on a remote server with a rather slow Internet connection and it seems to work. However, I'm just getting started with Dojo so I would greatly appreciate any advice if there is a better way to handle this issue.

Gord Thompson
  • 116,920
  • 32
  • 215
  • 418