Tabs and JS Functions

Use either :

obj.setItemText("New Text", index);



or



obj.setItemText(function(){return yourFunction()}, index);

I have used the first method and it works fine, I have not tried the function method.

Thanks Jim,
but the first obj.setItemText("New Text", index); sets a text for the item, what about the JS function? I need to set a text and a javascript function for each item. If I use both, they get overwrited,
Thanks.

Do you mean that you want to assign a function to be called if the tab is clicked? If so, then setItemText is not where you do it. setItemText controls what you see on the tab. It would not make sense to have both static text and a function controlling the visible text on the tab. If you have some odd thing going on then you need to create a variable and using your function and/or static text, set the contents of the variable to what you want displayed then assign that value to the tab with setItemText(variable, index).
If you want to assign a function to the tab to be called when the user clicks the tab, try obj.onItemClicked = function(event, index){your code here}

Granted, I'm new at this, but I tried calling a javascript function on the onItemClicked even...

obj.onItemClicked = function(event, index){ setTabPage(index);};

and now nothing happens. My tabs don't switch and I don't get the alert that is in my function. I'm sure I don't know how to call the function, but I haven't been able to find an example.

Could you please direct me to where there is an example of what I need to do?

Thank you very much.

Jack,

I'm using the tab component in a project where each tab represents a different dataset. When a tab is clicked, it builds a path to the correct dataset and then calls a "loadqueue" function to load that dataset into the grid. It's working great for me. Below is how I set the tab component up:

// Create Tabs for dataset loading

  var objTab = new AW.UI.Tabs;

  objTab.setId("myTabs");

  objTab.setItemText(["A", "B", "C", "D", "E", "F", "G", "All"]);

  objTab.setItemCount(18);

  objTab.setSelectedItems([16]);

  objTab.onItemClicked = function(event, index){ 

    var tabValue = objTab.getItemValue(index).toLowerCase(); 

    loadQueue(tabValue);

  };

The "loadQueue" function looks like this for me (just in case you are interested):

// Function to load new XML Data (different Queue file) when TAB is clicked on grid

function loadQueue(jsStr) {

  var xmlName = "http://domaininfohere/planning/project-queues/xml/gen_queue_"+jsStr+".xml";

  table.setURL(xmlName);

  table.request();

  table.refresh;

}

Hope it helps. If you'd like to see a working example, I have one online (but I do have some bugs to work out of it).

Hi Carl,

Thanks for your response. I think I understand what you did, and thought that what I had should have worked, but I was still unable to click on a tab and have it go to my function, so I think it is something else. I'll mention it here and then do some more searching on the forum.

In the <head> of my page I have a simple <script> block that has a simple function that I am trying to call. Right now all the function has in it is an alert. After following what you showed me, and still not having it work I went back to Debugging 101 and added this (onload="setTabPage(1);") to my <body> tag.

I still didn't get my alert, so I'm wondering if I am missing even something more basic with ActiveWidgets. Shouldn't I be able to have a script block in my head section and call it from on the page? Can you, or someone, direct me to the basics of having ActiveWidgets live in harmony with my javascript and my stylesheets (I also had a problem with it picking up some of my stylesheet classes, but that is for another search)?

I appreciate your help, and am very willing to read whatever may be helpful for me to read (if I can find what it is that I should read) :-).

Thanks a lot!

Forum search