I have been working on a web application using asp.net c#. I have a div element where I applied the following style to it at the server side:
spanNivelRiesgo1.Attributes.Add("style", "display:none; visibility:hidden");
Now, I have a radiobutton list and on its click event, I am attempting to display the div element, but unfortunately, it's not working as expected.
var spanNivelRiesgo = $("spanNivelRiesgo1").is(":visible") ? $("spanNivelRiesgo1") : $("spanNivelRiesgo2");
If the 'no' option is clicked, the div should appear:
$(spanNivelRiesgo).css({'display':'block', 'visibility':'visible'});
However, despite my efforts, it doesn't seem to be working correctly. As I am relatively new to jQuery, I'm unsure about what might be going wrong.
Below is the full code snippet:
<div class="span" id="spanNivelRiesgo1" runat="server" visible="False">
<table class="table_span">
<tr>
<td style="width: 230px;">Nivel de Riesgo:</td>
<td>
<asp:DropDownList ID="ddlNivelRiesgo1" runat="server" Width="150px" CausesValidation="True" ValidationGroup="a"></asp:DropDownList></td>
</tr>
</table>
</div>
<div class="span" id="spanNivelRiesgo2" runat="server" visible="False">
<table class="table_span">
<tr>
<td style="width: 230px;">Nivel de Riesgo:</td>
<td>
<asp:DropDownList ID="ddlNivelRiesgo2" runat="server" Width="150px" CausesValidation="True" ValidationGroup="a"></asp:DropDownList></td>
</tr>
</table>
</div>
On the server side:
if (_oportunidadMejora)
{
rblOportunidadMejora1.Items[0].Selected = rblOportunidadMejora2.Items[0].Selected = true;
spanNivelRiesgo1.Attributes.Add("style", "display:none; visibility:hidden");
spanNivelRiesgo2.Attributes.Add("style", "display:none; visibility:hidden");
}
else
{
rblOportunidadMejora1.Items[1].Selected = rblOportunidadMejora2.Items[1].Selected = true;
try
{
spanNivelRiesgo1.Attributes.Add("style", "display:block; visibility:visible");
ddlNivelRiesgo1.SelectedValue = _nivelRiesgo;
spanNivelRiesgo2.Attributes.Add("style", "display:block; visibility:visible");
ddlNivelRiesgo2.SelectedValue = _nivelRiesgo;
}
catch { }
On page load:
rblOportunidadMejora2.Attributes.Add("onclick", string.Format("javascript:return OportunidadMejora();"));
Client-side function:
function OportunidadMejora(){
var RB1 = document.getElementById("<%=rblOportunidadMejora2.ClientID%>");
var spanNivelRiesgo = $("spanNivelRiesgo1").is(":visible") ? $("spanNivelRiesgo1") : $("spanNivelRiesgo2");
var lblFecha = document.getElementById("<%=lblFechaCumplimiento.ClientID%>");
var lblPlazo = document.getElementById("<%=lblPlazo.ClientID%>");
var radio = RB1.getElementsByTagName("input");
var isChecked = false;
for (var i = 0; i<radio.length;i++){
if(radio[i].checked){
if(radio[i].value == "True"){//La opción si, está marcada
$(spanNivelRiesgo).css({'display':'none', 'visibility':'hidden'});
//spanNivelRiesgo.hide();
lblFecha.innerHTML = "Fecha de Seguimiento:";
lblPlazo.innerHTML = "Plazo de Seguimiento:";
}
else{//La opción no fue marcada
$(spanNivelRiesgo).css({'display':'block', 'visibility':'visible'});
//spanNivelRiesgo.show();
lblFecha.innerHTML = "Fecha de Cumplimiento:";
lblPlazo.innerHTML = "Plazo de Cumplimiento:";
}
}
}
}