CODEWITHSUNDEEP
browserdojotabcontainer
RooseH
RooseH

Reputation: 23

Tabcontainer behaves different from browser to browser

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>

Upvotes: 2

Views: 738

Answers (2)

peller
peller

Reputation: 4543

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.

Upvotes: 1

tvanfosson
tvanfosson

Reputation: 532505

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>

Upvotes: 0

Related Questions