using TabContainer

[Jim Myers]

I've got a simple page using a few tabs and it doesn't display
properly.
The dojango/templates/test.html does display properly.

There is a whole lot of stuff in the dojango test page that may or may
not help.
I can't find any real info on what is needed to enable the tabs to
function properly.
My page shows all the tab <div> text sequentially with no tabs.


My own test page looks like this...

{% extends "dojango/base.html" %}
{% block dojango_post_dj_config %}
<script type="text/javascript">
djConfig['isDebug'] = true;
djConfig.parseOnLoad = false;
</script>
{% endblock %}
{% block dojango_page_title %}Ridhwan Portal Home{% endblock %}
{% block _dojango_dojo_styles %}
<link href="/portal/rp/base.css" rel="stylesheet" type="text/css">
<link href="/portal/rp/Groups.css" rel="stylesheet" type="text/css">
{% endblock %}

{% block dojango_header_extra %}
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.Button");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.TabContainer");
</script>
{% endblock %}

{% block dojango_content %}
{% include "portal/header.html" %}
{% include "portal/navbar-top.html" %}
{% include "portal/main.html" %}
<!-- put left nav bar here as table content -->
{% include "portal/nav-dd.html" %}
{% include "portal/nav-groups.html" %}

{% include "portal/content.html" %}

<h1>Administration Tasks</h1>
<div id="mainTabContainer" dojoType="dijit.layout.TabContainer"
style="width:500px;height:100px">
<div id="student" dojoType="dijit.layout.ContentPane"
title="Student Tasks" selected="true">
<p>tab 1 does this...</p>
</div>
<div id="Groups" dojoType="dijit.layout.ContentPane"
title="Group Tasks">
<p>tab 2 does this...</p>
</div>
<div id="Utility" dojoType="dijit.layout.ContentPane"
title="Utility Tasks">
<p>tab 3 does this...</p>
</div>
</div>
{% include "portal/content-end.html" %}
{% include "portal/footer.html" %}
{% endblock %}

[Tobias von Klipstein]

Hi Jim,

I just tried the following on my test page and it worked for me:

{% extends "dojango/base.html" %}

{% block dojango_post_dj_config %}

  <script type="text/javascript">

    djConfig['isDebug'] = true;

    djConfig.parseOnLoad = true; // otherwise you would have to call dojo.parser.parse() manually!

  </script>

{% endblock %}

{% block dojango_header_extra %}

  <script type="text/javascript">

    dojo.require("dijit.layout.TabContainer");

    dojo.require("dijit.layout.ContentPane");

    // alternative, when you have defined djConfig.parseOnLoad = false;

    // dojo.require("dojo.parser");

    // dojo.addOnLoad(function(){dojo.parser.parse()});

  </script>

{% endblock %}

{% block dojango_content %}

    <h1>Administration Tasks</h1>

      <div id="mainTabContainer" dojoType="dijit.layout.TabContainer"

           style="width:500px;height:100px">

         <div id="student" dojoType="dijit.layout.ContentPane"

       title="Student Tasks" selected="true">

         <p>tab 1 does this...</p>

         </div>

         <div id="Groups" dojoType="dijit.layout.ContentPane"

              title="Group Tasks">

         <p>tab 2 does this...</p>

         </div>

         <div id="Utility" dojoType="dijit.layout.ContentPane"

                title="Utility Tasks">

         <p>tab 3 does this...</p>

         </div>

    </div>

{% endblock %}

Hope this helps setting up the TabContainer at yours.

Regards, Tobias