+ Start a Discussion
KamindiaKamindia 

Hide Display component with Button

Hello,

I tried to work with some code but component are not  going to visible. I tried there are 2 input field. the first text field is visible by default. and other text field is display only when "add tool" button is clicked.Below is the code for that.

inspite of hardcoding the value as 21 its not working.

 

 

<apex:page >
<script type="text/javascript" >
function loadLoginTool(idGet, idBut, fldTool, nbMax)
{
alert("Id"+idGet);
alert("Id"+idBut);
//alert(document.getElementById('{!$Component.frm.NbLoginTool}').name);
//alert("Id"+document.getElementById('{!$Component.frm.NbLoginTool}').value);
alert("Id"+nbMax);
//alert("heye"+document.getElementById('{!$Component.frm.fldTool}').value)
//var nbLogin = parseInt(document.getElementById('{!$Component.frm.fldTool}').value)
nbLogin =21
nbLogin = nbLogin + 1
//alert("Nb"+nbLogin);
if (nbLogin == parseInt(nbMax))
{
document.getElementById('{!$Component.frm.idBut}').style.display = "none"
}
var dislog=idGet+""+nbLogin
alert(dislog);
document.getElementById('{!$Component.frm.dislog}').style.display ="block"
// document.getElementById('{!$Component.frm.fldTool}').value=nbLogin
// document.forms[0][fldTool].value = nbLogin
}
</script>
<apex:form id="frm">
<apex:outputText id="NbLoginTool" value="21"/>
<div id='LoginTool' >
<TABLE WIDTH="100%" BORDER="1" CELLSPACING="0" CELLPADDING="2">

<tr id='lTool21' >
<TD VALIGN="Top" COLSPAN="2" ><br></br><apex:inputText id="fl_Tools_Tool_21" label="hello"/></td><td><br></br><span id='lToolBut'><a class="bouton" style = "cursor:hand" onclick="loadLoginTool('lTool', 'lToolBut', 'NbLoginTool', '30');">Add a Tool</a></span></td>
</TR>

<TR id='lTool22' style='display:none' >
<TD VALIGN="Top" COLSPAN="2" ><apex:inputText id="fl_Tools_Tool_22" label="hello"/></td><br></br><td><span id='lToolBut22'>
<a class="bouton" style = "cursor:hand" onclick="removeTool('lTool', 'lToolBut', '22', 'NbLoginTool', '30');">Remove Tool</a></span></td>
</TR>
</TABLE>

</div>
</apex:form>
</apex:page>"

 

 

It could be tried by just copying the code and click on add tool button.

 

Shiv ShankarShiv Shankar

Hi i have implemented it through jQuery please check once

 

<apex:page >
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" >
function loadLoginTool(idGet, idBut, fldTool, nbMax)
{
alert($('input[id $="fl_Tools_Tool_22"]').val());
$('[id $="lTool22"]').css('display','block');
}
</script>
<apex:form id="frm">
<apex:outputText id="NbLoginTool" value="21"/>
<div id='LoginTool' >
<TABLE WIDTH="100%" BORDER="1" CELLSPACING="0" CELLPADDING="2">

<tr id='lTool21' >
<TD VALIGN="Top" COLSPAN="2" ><br></br><apex:inputText id="fl_Tools_Tool_21" label="hello"/></td><td><br></br><span id='lToolBut'><a class="bouton" style = "cursor:hand" onclick="loadLoginTool('lTool', 'lToolBut', 'NbLoginTool', '30');">Add a Tool</a></span></td>
</TR>

<TR id='lTool22' style='display:none' >
<TD VALIGN="Top" COLSPAN="2" ><apex:inputText id="fl_Tools_Tool_22" label="hello"/></td><br></br><td><span id='lToolBut22'>
<a class="bouton" style = "cursor:hand" onclick="removeTool('lTool', 'lToolBut', '22', 'NbLoginTool', '30');">Remove Tool</a></span></td>
</TR>
</TABLE>

</div>
</apex:form>
</apex:page>