Hello to all.
First off all I have to say that this is a great product, and all my gratitude for the people who made it.
My problem now is this:
I have an aplication in which I put a tab bar in a form. The form is on multiple tabs that are activated or deactivated or there content change base on the user generated events on previous form elements.
something like this: [code]
form elementes
1
2
other form elements
other form elements
Others form elements
[/code]
I also initiate the other dhtmlx obj…
When I change the state of ‘example’ in a specific order I receive this error in all browsers:(IE6, IE8, Chorme, FireFox…);
The order is: 1,2,0 (by value).
— this string is from Firefox FireBug —
uncaught exception: [Exception… “Component returned failure code: 0x80004003 (NS_ERROR_INVALID_POINTER)” nsresult: “0x80004003 (NS_ERROR_INVALID_POINTER)” location: “JS frame :: domain.xx/web/dhtmlx/dhtmlx.js :: anonymous :: line 1740” data: no]
Line 0
If you have any idea will be grate. Thank You.
Hello
there isn’t “c4” container on the page. Try to comment the following line to solve the issue:
//tabbar.setContent(‘t4’, ‘c4’);
I posted wrong, the last container is c4. In post I wrote c3_s. My bad.
<form>
<div id='tabbar'></div>
<div id='c1'>form elementes
<select name='example' onchange='validateTabs(this.value)'>
<option value='0'></option>
<option value='1'>1</option>
<option value='2'>2</option>
</select>
</div>
<div id='c2' style='display:none;'>other form elements</div>
<div id='c2_s' style='display:none;'>other form elements</div>
<div id='c3' style='display:none;'>
<div id='gridObj'></div>
<div id='toolbarObj'></div>
</div>
<div id='c3_s' style='display:none;'>
<div id='gridObj_S'></div>
<div id='toolbarObj_S'></div>
</div>
<div id='c4'>Others form elements</div>
</form>
<script>
var tabbar=new dhtmlXTabBar("tabbar","top");
tabbar.setImagePath("/web/dhtmlx/imgs/");
tabbar.addTab("t1","Title1","130px");
tabbar.addTab("t2","Title2","130px");
tabbar.addTab("t3","Title3","130px");
tabbar.addTab("t4","Title4","130px");
tabbar.setContent('t1', 'c1');
tabbar.setContent('t4', 'c4');
tabbar.setSkinColors("#EFEFEF","#FAFAFA");
function validateTabs(offerType) {
switch (offerType) {
case '1':
tabbar.setContent('t2', 'c2');
tabbar.setContent('t3', 'c3');
tabbar.enableTab('t2');
tabbar.enableTab('t3');
tabbar.setTabActive('t2');
break;
case '2':
tabbar.setContent('t2', 'c2_s');
tabbar.setContent('t3', 'c3_s');
tabbar.enableTab('t2');
tabbar.enableTab('t3');
tabbar.setTabActive('t2');
break;
default:
tabbar.disableTab('t2',true);
tabbar.disableTab('t3',true);
}
validateTabs(0);
</script>
There is the following mistake:
tabbar.setContent(‘t2’, ‘c2’);
tabbar.setContent(‘t2’, ‘c2_s’); /-> element with id = ‘c2’ is removed/
tabbar.setContent(‘t2’, ‘c2’); /you try to add non-existent element/
To solve the issue:
var elems = {}
elems.c2 = document.getElementById(“c2”);
elems.c3 = document.getElementById(“c3”);
elems.c2_s = document.getElementById(“c2_s”);
elems.c3_s = document.getElementById(“c3_s”);
function validateTabs(offerType) {
switch (offerType) {
case ‘1’:
tabbar.setContent('t2',elems.c2);
tabbar.setContent('t3',elems.c3);
tabbar.enableTab('t2');
tabbar.enableTab('t3');
tabbar.setTabActive('t2');
break;
case '2':
tabbar.setContent('t2',elems.c2_s);
tabbar.setContent('t3', elems.c3_s);
tabbar.enableTab('t2');
tabbar.enableTab('t3');
tabbar.setTabActive('t2');
break;
default:
tabbar.disableTab('t2',true);
tabbar.disableTab('t3',true);
}
}