Re-using a JS function on each row of a loop

[nohandlesleft254]

Hi,

I have been using a simple JS show/hide tab function. I now want to use it on x rows returned from a query. I have tried dynamic function names etc etc but can get it to work...

*Item = Code of item (each row represents an item)

<script language="text/javascript">
function show(layerName)
{
document.getElementById(layerName).style.display = '';
}

function hide(layerName)
{
document.getElementById(layerName).style.display = 'none';
}

function tabs(Item,Show1,Hide1)
{
hide(Item+Hide1+'_data');
show(Item+Show1+'_data');
}
</script>

<table cellpadding=0 cellspacing=0 border=0>
<tr>
<td onClick="javascript:tabs('<cfoutput>#LCase(FindItems.Code)#</cfoutput>','tab1','tab2')">Components</td>
<td onClick="javascript:tabs('<cfoutput>#LCase(FindItems.Code)#</cfoutput>','tab2','tab1')">Customise</td>
</tr>
</table>

<div id="<cfoutput>#LCase(FindItems.Code)#</cfoutput>tab1_data" style="display:none">Tab1</div>
<div id="<cfoutput>#LCase(FindItems.Code)#</cfoutput>tab2_data" style="display:none">Tab2</div>

 

[cLFlaVA]

could you show the HTML generated from your coldfusion? do a view > source in your browser.



*cLFlaVA
----------------------------
[tt]mr. pibb + red vines = crazy delicious![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[nohandlesleft254]

Hi cLFlaVA,

<script language="text/javascript">
function show(layerName)
{
document.getElementById(layerName).style.display = '';
}

function hide(layerName)
{
document.getElementById(layerName).style.display = 'none';
}

function tabs(Item,Show1,Hide1)
{
hide(Item+Hide1+'_data');
show(Item+Show1+'_data');
}
</script>

<table cellpadding=0 cellspacing=0 border=0>
<tr>
<td onClick="javascript:tabs('d3dp60','tab1','tab2')">Components</td>
<td onClick="javascript:tabs('d3dp60','tab2','tab1')">Customise</td>
</tr>
</table>

<div id="d3dp60tab1_data" style="">Tab1</div>
<div id="d3dp60tab2_data" style="display:none">Tab2</div>

 

[nohandlesleft254]

also the loop starts after the JS ends so really it looks like this -

<script language="text/javascript">
function show(layerName)
{
document.getElementById(layerName).style.display = '';
}

function hide(layerName)
{
document.getElementById(layerName).style.display = 'none';
}

function tabs(Item,Show1,Hide1)
{
hide(Item+Hide1+'_data');
show(Item+Show1+'_data');
}
</script>

<table cellpadding=0 cellspacing=0 border=0>
<tr>
<td onClick="javascript:tabs('d3dp60','tab1','tab2')">Components</td>
<td onClick="javascript:tabs('d3dp60','tab2','tab1')">Customise</td>
</tr>
</table>

<div id="d3dp60tab1_data" style="">Tab1</div>
<div id="d3dp60tab2_data" style="display:none">Tab2</div>

<table cellpadding=0 cellspacing=0 border=0>
<tr>
<td onClick="javascript:tabs('bu80','tab1','tab2')">Components</td>
<td onClick="javascript:tabs('bu80','tab2','tab1')">Customise</td>
</tr>
</table>

<div id="bu80tab1_data" style="">Tab1</div>
<div id="bu80tab2_data" style="display:none">Tab2</div>

<table cellpadding=0 cellspacing=0 border=0>
<tr>
<td onClick="javascript:tabs('d3dp80','tab1','tab2')">Components</td>
<td onClick="javascript:tabs('d3dp80','tab2','tab1')">Customise</td>
</tr>
</table>

<div id="d3dp80tab1_data" style="">Tab1</div>
<div id="d3dp80tab2_data" style="display:none">Tab2</div>

 

[cLFlaVA]

<script language="text/javascript">

should be

<script [red]type[/red]="text/javascript">

*cLFlaVA
----------------------------
[tt]mr. pibb + red vines = crazy delicious![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[nohandlesleft254]

damn! - thanks cLFlaVA