active tab

Suite and Optimus Suite 5
#1

I have a tabbar including a tab whicj content is datagrid with the information of the contracts; then I have a button for adding a new tab with a form that allow me to add a new contract.

When I submit the form and a contract is added, I make the tab with the datagrid active and close the one with form using the following code:

parent.tabbarHome.setTabActive(id);
parent.tabbarHome.removeTab(idTab,true);

I’d like to refresh the content of the tab with the datagrid (that is a PHP file) everytime it becomes active.
I tried the following code, but it doesn’t work:

if (parent.tabbarHome.getActiveTab() == 'a1') {
	document.write('<meta http-equiv="refresh">');
}

Anybody can help me?
Thanks

#2

sorry…the first code is:

var id = (new Date()).valueOf();
parent.tabbarHome.setTabActive(id);
parent.tabbarHome.removeTab(idTab,true);
#3

Is the grid create on the same page, or loaded in tabbar as sub-page ( iframe mode )
In first case you can just call

mygrid.clearAll(); mygrid.load("data.php");

or if it is in iframe

tabbar.tabWindow(id).mygrid.clearAll(); tabbar.tabWindow(id).mygrid.load("data.php");

Also, it not relate to the grid, but you can use hideTab instead of removing - in such case you will need to create it again and again

#4

every tab content is a PHP file and is called with the code:

tabbarHome.setHrefMode('iframes-on-demand');
tabbarHome.setContentHref(id, file.php');

I need some code that allow me to refresh the content of a tab (the PHP file) when such tab (its “id” is known) is selected.

#5

Try to use

tabbar.forceLoad(id);

in case of “iframes-on-demand” it will reload existing content.

also

tabbar.setContentHref(id,new_href);

can be used to reload tab with different url

#6

OK…but how can I know when the tab including the list (its ID is ‘a1’) is ctive?

I thought about this code:

if (tabbarHome.getActiveTab() == 'a1') {
	tabbarHome.forceLoad('a1');
}

bit it doesn’t work

#7

It looks as a correct code, in which moment this code is called?

#8

This code is called in the tabbar, not in the tab content.

The entire code follows:

<link rel="STYLESHEET" type="text/css" href="dhtmlxSuite/dhtmlxTabbar/codebase/dhtmlxtabbar.css">
<script  src="dhtmlxSuite/dhtmlxTabbar/codebase/dhtmlxcommon.js"></script>
<script  src="dhtmlxSuite/dhtmlxTabbar/codebase/dhtmlxtabbar.js"></script>
<div id="a_tabbar" style="width: auto; height: 482px;"/>
<script>
    tabbarHome = new dhtmlXTabBar('a_tabbar', 'top');
    tabbarHome.setSkin('default');
    tabbarHome.setImagePath('dhtmlxSuite/dhtmlxTabbar/codebase/imgs/');
    tabbarHome.addTab('a1', '&nbsp;&nbsp;Elenco Contratti&nbsp;&nbsp;', '*');
    tabbarHome.enableTabCloseButton(true);
    tabbarHome.setHrefMode('iframes-on-demand');
    tabbarHome.setContentHref('a1', '<? echo $url; ?>ElencoContratti.php');
    tabbarHome.setTabActive('a1');

    if (tabbarHome.getActiveTab() == 'a1') {
        tabbarHome.forceLoad('a1');
    }

    function add(nomeTab) {
        var id = (new Date()).valueOf();
        tabbarHome.addTab(id, nomeTab+'&nbsp;&nbsp;&nbsp;&nbsp;', '*');
        tabbarHome.setContentHref(id, nomeTab.replace(/ /g, "")+'.php?idTab='+id);
        tabbarHome.setTabActive(id);
    }
</script>
</div>
#9

Try to change it as

tabbarHome = new dhtmlXTabBar('a_tabbar', 'top'); tabbarHome.attachEvent("onSelect", function(id){ if (id == "a1") tabbarHome.forceLoad('a1'); }); ...

#10

I tried first of all this code:

[code]
tabbarHome = new dhtmlXTabBar(‘a_tabbar’, ‘top’);
tabbarHome.attachEvent(“onSelect”, function(id) {
if (id == “a1”) { tabbarHome.forceLoad(‘a1’); }
});
tabbarHome.setSkin(‘default’);
tabbarHome.setImagePath(‘dhtmlxSuite/dhtmlxTabbar/codebase/imgs/’);
tabbarHome.addTab(‘a1’, ’  Elenco Contratti  ', ‘*’);
tabbarHome.enableTabCloseButton(true);
tabbarHome.setHrefMode(‘iframes-on-demand’);
tabbarHome.setContentHref(‘a1’, ‘<? echo $url; ?>ElencoContratti.php’);
tabbarHome.setTabActive(‘a1’);

function add(nomeTab) {
var id = (new Date()).valueOf();
tabbarHome.addTab(id, nomeTab+’    ‘, ‘*’);
tabbarHome.setContentHref(id, nomeTab.replace(/ /g, “”)+’.php?idTab=’+id);
tabbarHome.setTabActive(id);
}
[/code]but the content of the “a1” tab was invisible.

Then I tried to move the attachEvent function at the end, as you can see on this code:

[code]
tabbarHome = new dhtmlXTabBar(‘a_tabbar’, ‘top’);
tabbarHome.setSkin(‘default’);
tabbarHome.setImagePath(‘dhtmlxSuite/dhtmlxTabbar/codebase/imgs/’);
tabbarHome.addTab(‘a1’, ’  Elenco Contratti  ', ‘*’);
tabbarHome.enableTabCloseButton(true);
tabbarHome.setHrefMode(‘iframes-on-demand’);
tabbarHome.setContentHref(‘a1’, ‘<? echo $url; ?>ElencoContratti.php’);
tabbarHome.setTabActive(‘a1’);
tabbarHome.attachEvent(“onSelect”, function(id) {
if (id == “a1”) { tabbarHome.forceLoad(‘a1’); }
});

function add(nomeTab) {
var id = (new Date()).valueOf();
tabbarHome.addTab(id, nomeTab+’    ‘, ‘*’);
tabbarHome.setContentHref(id, nomeTab.replace(/ /g, “”)+’.php?idTab=’+id);
tabbarHome.setTabActive(id);
}
[/code]But, when I add a new tab, this doesn’t became active (refer to the add function) and, even if I click on the new tab, this doesn’t became active.

Any other suggestion??? I think the solution is not far…

#11

Was a my typo , the correct code must end with return true;

tabbarHome.attachEvent("onSelect", function(id) { if (id == "a1") { tabbarHome.forceLoad('a1'); } return true; });

#12

Great!!! That’s perfect…thank you very much

#13

I don’t know if the function can be improved…

The “a1” tab content is a PHP script including some button and a dhtmlx datagrid.
Is it possible, when I make such tab active, to reload only the datagrid?

#14 
tabbarHome.attachEvent("onSelect", function(id) {
    if (id == "a1") { 
              if (tabbarHome.tabWindow("a1") && tabbarHome.tabWindow("a1").mygrid) {
                     tabbarHome.tabWindow("a1").mygrid.clearAll()
                     tabbarHome.tabWindow("a1").mygrid.load("data.php");
              }
    return true;
});

there mygrid - name of grid object inside the page.

#15

The PHP file includes some button and the datagrid.

I tried your code, but when i try to add a new tab I can never make it active…

#16

sorry…a } was missing.

I correct your code, but when I have a different tab as active and try to make the “a1” tab active, I see the following error:
Error Type: LoadXML
Description: Incorrect XML

#17

is it possible to have the same forceLoad defined in the following code

tabbarHome.attachEvent("onSelect", function(id) { if (id == "a1") { tabbarHome.forceLoad('a1'); } return true; });using the tab LABEL, instead of the tab ID???

#18

Error Type: LoadXML Description: Incorrect XML

It seems that code was fired and using data.php to reload grid - probably it need to be replaced with name of actual data feed, which your grid is using.

using the tab LABEL, instead of the tab ID???
Yep, replace if with

 if (this.getLabel(id) == "a1")
#19

do you mean I have to create two different PHP script and include them in the PHP file that is the content of the tabbar…so I can use the following code?

tabbarHome.attachEvent("onSelect", function(id) { if (id == "a1") { if (tabbarHome.tabWindow("a1") && tabbarHome.tabWindow("a1").mygrid) { tabbarHome.tabWindow("a1").mygrid.clearAll() tabbarHome.tabWindow("a1").mygrid.load("data.php"); } return true; });

I know only the ID of that tab…what about all the other (for which I don’t have a before-known ID)?

#20

How is data loaded in the grid, in your case?
By default it is loaded by grid.load command from some static xml of dynamic source ( data.php )
So to change the data in the grid , you need to locate grid object ( you need to know the name of grid object for that ) and after that issue cleaAll and load commands against the grid, to delete the old data and reload the new one.