Tabcontainer behaves different from browser to browser

StackOverflow https://stackoverflow.com/questions/1812682

  •  06-07-2019
  •  | 
  •  

Question

The following code works on IE8, Safari 4.0.2 - but generates an empty page on Firefox 3.5.5. Any idea ?

<html>
 <head>
  <link rel="stylesheet" type="text/css" href="http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/themes/tundra/tundra.css">
</head>
<body class="tundra">
 <div style="width: 350px; height: 300px">
  <div id="tc1-prog">
 </div>
</div>
</body>

 <script type="text/javascript" src="http://archive.dojotoolkit.org/nightly/dojotoolkit/dojo/dojo.js"
  djConfig="parseOnLoad: true">;
  </script>
  <script type="text/javascript">
    dojo.require("dijit.layout.TabContainer");
    dojo.require("dijit.layout.ContentPane");

 dojo.addOnLoad(function() {
        var tc = new dijit.layout.TabContainer({
                style: "height: 100%; width:100%;"
        },
        "tc1-prog");

        var cp1 = new dijit.layout.ContentPane({
        title: "Food",
        content: "We offer amazing food"
    });
    tc.addChild(cp1);

    var cp2 = new dijit.layout.ContentPane({
        title: "Drinks",
        content: "We are known for our drinks."
    });
    tc.addChild(cp2);

    tc.startup();
});
</script>
</html>
Was it helpful?

Solution

Likely a cross-domain problem. The nightly build is posted for testing, but to actually use it locally, you must download the tarball. Otherwise, references are made to load individual modules using xhr+eval which break the browser's domain security model.

Your other choice is to use a "cross domain" build of Dojo, which is pretty much what you wanted to do and super simple to deploy -- just point at it with the script tag and off you go. That's what's available on the Google CDN.

OTHER TIPS

You might want to put the script tag inside the body tag. For it to be valid HTML, it needs to be either in a body or head tag. An invalid document could certainly result in it not operating consistently between browsers.

Update: Also, you might want to try using a production build instead of the nightly build. I changed the URL to use http://ajax.googleapis.com/ajax/libs/dojo/1.3/dojo/dojo.xd.js and it worked fine for me in FF. It was broken with the nightly build.

From the HTML 4.01 Spec:

An HTML 4 document is composed of three parts:

a line containing HTML version information,
a declarative header section (delimited by the HEAD element),
a body, which contains the document's actual content. The body may be implemented by the BODY element or the FRAMESET element.

<html>
<head>
  <link ... />
</head>
<body>
   ...
   <script ... >
   </script>
</body>
</html>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top