PDA

View Full Version : YAHOO.ext.TabPanel scope issue


emudojo
1 Feb 2007, 10:30 AM
HI I'm trying to learn Yui-ext, but its harder that I thought.

I'm trying to enable one tab after I finish working on a previous tab..

I have 2 main files

index.html





<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test</title>

</head>
<body>

<h1>Wellcome to the NEW Max-Media-Manager Tag Tool</h1>

<h2>Please follow the Tabs to create and test your own MMM tags..</h2>



<div id="tabs1">
<div id="chose-client" class="tab-content">


Please Select one campaign from the drop-down box below, and press Continue.</p>
<select name="clients" id="clients"></select>
<script>

request.open("GET", "mmmtt_library.php?load=clients");
request.send(null);
create_clients_combo(doc);
tab = TabsExample.return_tabs();
tab.activate("chose-trackers");
</script>



Next Step (#)</p>
</div>
<div id="chose-campaign" class="tab-content">
(Content goes here)
</div>
<div id="chose-trackers" class="tab-content">
(Content goes here)
</div>

</div>
</body>
</html>



The second file

backend.js



var TabsExample = {
tabs: null,
init : function(){
// basic tabs 1, built from existing content
this.tabs = new YAHOO.ext.TabPanel('tabs1');
this.tabs.addTab('chose-client', "Chose Client");
this.tabs.addTab('chose-campaign', "Chose Campaign");
this.tabs.addTab("chose-trackers", "Chose trackers");
this.tabs.addTab("chose-variables", "Chose Variables")
this.tabs.activate('chose-client');
this.tabs.disable('chose-trackers');



},
activate: function(name) {
this.tabs.activate(name);
}


}

YAHOO.ext.EventManager.onDocumentReady(TabsExample.init, TabsExample, true);



But I receive this error when trying to enable it...

tab has no properties
[Break on this error] tab.addTab("chose-trackers");

Any ideas? I really need this
tryanDLS
1 Feb 2007, 11:48 AM
Did you even look at the code you wrote? What is TabsExample.return_tabs()?

Embedding script tags in in your html is bad. If you're going to externalize the js code, move all of it, including inline onclick handlers.
emudojo
1 Feb 2007, 1:05 PM
forget all about get_tabs

the real deal here is

tab.activate("chose-trackers");

tabs MUST be a valid object reference but it isnt.... :? I dont know why... even inside the json structure I miss its reference if I try to reference it from another method (apart of init)
tryanDLS
1 Feb 2007, 1:17 PM
You don't know why 'tab' isn't a valid object? Where do think you create a variable called 'tab'?

You need to spend some time learning js scoping and use the debugger to look at what variables are available as your code executes.
emudojo
1 Feb 2007, 2:56 PM
Ok I have this


tab = TabsExample.return_tabs();
tab.activate("chose-trackers"); <-- tab has no members WTF


Now let see this in the json class





var TabsExample = {
tabs: null,
init : function(){
// basic tabs 1, built from existing content
this.tabs = new YAHOO.ext.TabPanel('tabs1');
this.tabs.addTab('chose-client', "Chose Client");
this.tabs.addTab('chose-campaign', "Chose Campaign");
this.tabs.addTab("chose-trackers", "Chose trackers");
this.tabs.addTab("chose-variables", "Chose Variables")
this.tabs.activate('chose-client');
this.tabs.disable('chose-trackers');
},
return_tabs: function() {
return this.tabs;
}


I still got the same error... but I dont see nothing really wrong here
tryanDLS
1 Feb 2007, 3:04 PM
I don't know how else to say this. Get a debugger and step thru the code! Obviously, your method is not returning the object you 'think' it is.
emudojo
1 Feb 2007, 3:27 PM
I know....

Can you please check your code with a little debugger. tnks :wink: