FW: [Dojo-interest] Tab Container Problem! Need Help please

Thu Feb 22 04:42:00 MST 2007

<I am resending this email as a plain text, Html email didn't seems to pass>

Hi all, Matthew, 

Tks for your help, 

I have tried many options of javascript positioning but it is still not
working. 

The “Hello Word” button is always there, but the javascript associated to it
doesn’t seem to work. As you asked, I have inspected the page with the DOM
inspector, I see that events are associated to the button, whatever I am
doing, the <HelloPressed> is never set to the onClick event. 

The strange thing (maybe it is normal?) is that ALL javascript in the page
(inside the DIV) is never called. Per exemple, If I put a simple
<alert(“test”)”;> inside the javascript tags, the alert is never executed. 

To have something to test, I have transfert all the javascript of test.jsp
in the Main page. The javascript <alert(“test”);> is normally executed, but
the “Hello World” button still not work. So, I checked if the Button is
correctly set, and I found that the Init function is not correctly executed
:

The dojo.widget.byId(“helloButton”); returns a UNDEFINED object, It should
return my Hello Word button! If I could make this work, it would be a good
starting point:

This is the init function that is not working:

	function init()
    {
      var helloButton = dojo.widget.byId('helloButton'); // CANNOT FIND THE
BUTTON
      // alert to see of the button is there
      alert("button : " + helloButton); // Shows BUTTON: UNDEFINED!!!
      dojo.event.connect(helloButton, 'onClick', 'helloPressed'); // cannot
be set
    }

This is the content of my Test.jsp page (inside the TabContainer Tab3):
<button dojoType="Button" widgetId="helloButton">Hello World!!!</button>

Here the complete code of the Main Container
MainCCare.jsp (container page):
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

<meta http-equiv="Context-Type" content="text/html; charset=UTF-8">
<!--
<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-->

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>TabContainer Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>

<script type="text/javascript">
	var djConfig = { isDebug: false };
</script>
<script type="text/javascript" src="js/dojo/dojo.js"></script>
<script type="text/javascript">
	dojo.require("dojo.widget.TabContainer");
	dojo.require("dojo.widget.LinkPane");
	dojo.require("dojo.widget.ContentPane");
	dojo.require("dojo.widget.LayoutContainer");
</script>

<style type="text/css">
body {
	font-family : sans-serif;

}

.header1 {
		font-weight: bold;
		font-style: italic;
		font-family: Arial, Verdana, sans-serif;
		color: #CC0033;
		font-size: 24;
	}

.header2 {
		font-weight: bold;
		font-style: italic;
		font-family: Arial, Verdana, sans-serif;
		color: #CC2233;
		font-size: 18;
	}

#FixedSizeRule .dojoTabPaneWrapper {
	height: 800;
	width: 800;
	overflow: auto;
	padding : 10px 10px 10px 10px;
}

</style>

<body>
<p class="header1">Customer Care SBH</p>

<div id="FixedSizeRule">
		<div id="TabContainerFixedHeight" dojoType="TabContainer"
doLayout="false">
		<a id="tab3" dojoType="LinkPane" href="test.jsp"
refreshOnShow="true"><span style="header2">TEST</span></a>
		<a id="tab1" dojoType="LinkPane" href="infoLine.do"
refreshOnShow="true"><span style="header2">Information sur la
ligne</span></a>
		<a id="tab2" dojoType="LinkPane" href="provisioningInd.do"
refreshOnShow="true"><span style="header2">Indicateur de
provisioning</span></a>
		</div>
</div>

</body>

<script type="text/javascript">
    dojo.require("dojo.event.*");
	dojo.require("dojo.widget.*");
</script>

<script type="text/javascript">

	function helloPressed(){
	dojo.debug('Hello!!!');
	alert('hello');
	}

	alert('TEST'); // <-- test working here!

	function init()
    {
      var helloButton = dojo.widget.byId('helloButton'); // CANNOT FIND THE
BUTTON
      // alert to see of the button is there
      alert("button : " + helloButton); // BUTTON IS UNDEFINED!!!
      dojo.event.connect(helloButton, 'onClick', 'helloPressed');
    }

	  function helloCallback(type, data, evt)
      {
        if (type == 'error')
          alert('Error when retrieving data from the server!');
        else
          alert(data);
      }

    	dojo.addOnLoad(init);
    </script>

</html>

Test.jps (contained page) – cannot be simplier!:

<button dojoType="Button" widgetId="helloButton">Hello World!!!</button>

Tks all

Etienne.

________________________________________
From: dojo-interest-bounces at dojotoolkit.org
[mailto:dojo-interest-bounces at dojotoolkit.org] On Behalf Of
mengel at notes.cc.sunysb.edu
Sent: February 21, 2007 3:51 PM
To: dojo-interest at dojotoolkit.org
Subject: Re: [Dojo-interest] Tab Container Problem! Need Help please

Here's a shot in the dark.  It may be a timing issue.  In other words, the
code for connecting the button onclick event is firing before the tabs are
set up and the button is created.  Before connecting the button event, be
sure the tab system and button are created.  Try putting the
dojo.event.connect line after the button line in the code.  Before you do
that you may want to inspect the dom of your page to see if the event is
connected to the function. 

Matthew Engel
Senior Programmer/Analyst
State University of New York at Stony Brook
mengel at notes.cc.sunysb.edu 

"Etienne Laverdiere" <etienne.laverdiere at ext.bull.net> 
Sent by: dojo-interest-bounces at dojotoolkit.org 
02/21/2007 08:29 AM 
Please respond to
dojo-interest at dojotoolkit.org

To
<dojo-interest at dojotoolkit.org> 
cc

Subject
[Dojo-interest] Tab Container Problem! Need Help please

Hi all, 

I am using a Tab Container to show some dynamic pages. All Dojo's Tab
Container examples uses Static Pages. But I don't want to use the Tab
Container to show static pages, there's no real advantage of doing that.

I have made a simple example using a 1) Tab Container and 2) an Ajax Hello
word, and unfortunately, it doesn't work as expected. 

So, here's the code. My first chunk of code is my Tab container page. I am
already showing 2 dynamic dojo-ajaxed pages (Tab1 and tab2 with struts) and
a simple testing page (tab3) with a dojo Hello world example:

[...]
<script type="text/javascript" src="js/dojo/dojo.js"></script>
<script type="text/javascript">
                dojo.require("dojo.widget.TabContainer");
                dojo.require("dojo.widget.LinkPane");
                dojo.require("dojo.widget.ContentPane");
                dojo.require("dojo.widget.LayoutContainer");
</script>
[...]
<div id="FixedSizeRule">
                                 <div id="TabContainerFixedHeight"
dojoType="TabContainer"
doLayout="false">
                                 <a id="tab1" dojoType="LinkPane"
href="infoLine.do"
refreshOnShow="true"><span style="header2">Line Information</span></a>
                                 <a id="tab2" dojoType="LinkPane"
href="provisioningInd.do"
refreshOnShow="true"><span style="header2">Line provisioning</span></a>
                                 <a id="tab3" dojoType="LinkPane"
href="test.jsp"
refreshOnShow="true"><span style="header2">test</span></a>
                                 </div>
</div>

And this is my simple test.jsp page (tab3):

[...]
<script type="text/javascript">
djConfig = { isDebug: true };
</script>
<script type="text/javascript" src="js/dojo/dojo.js"></script>
</head>
<body>
<script type="text/javascript">
   dojo.require("dojo.event.*");
                dojo.require("dojo.widget.*");
//                 dojo.require("dojo.widget.Button2");

                function helloPressed(){
                dojo.debug('Hello!!!');
                //alert('hello');
                }

                function init()
   {
     var helloButton = dojo.widget.byId('helloButton');
     dojo.event.connect(helloButton, 'onClick', 'helloPressed');
   }

                  function helloCallback(type, data, evt)
     {
       if (type == 'error')
         alert('Error when retrieving data from the server!');
       else
         alert(data);
     }

                    dojo.addOnLoad(init);
   </script>
<button dojoType="Button" widgetId="helloButton">Hello World!!!</button>
</body>
[...]

If I load this page outside the TabContainer it works perfectly (/test.jsp),
but when I load it using the TabContainer TAB3 I have no ajax effect on the
HelloWord ajax button! 

Could someone tell me how I can make it works? I am not a javascript expert
(still), but I guess theirs is some javascript conflict like the DIV must be
point out or something like that?

Tks all, 

Etienne

-- 
No virus found in this outgoing message.
Checked by AVG Free Edition.
Version: 7.5.441 / Virus Database: 268.18.1/690 - Release Date: 16/02/2007
2:25 PM

_______________________________________________
Dojo FAQ: http://dojo.jot.com/FAQ
Dojo Book: http://manual.dojotoolkit.org/DojoDotBook
Dojo-interest at dojotoolkit.org
http://dojotoolkit.org/mailman/listinfo/dojo-interest

--
No virus found in this incoming message.
Checked by AVG Free Edition.
Version: 7.5.441 / Virus Database: 268.18.1/690 - Release Date: 16/02/2007
2:25 PM

-- 
No virus found in this outgoing message.
Checked by AVG Free Edition.
Version: 7.5.441 / Virus Database: 268.18.1/690 - Release Date: 16/02/2007
2:25 PM