Setting the label to visible using javascript

Question

I have this Asp.net page and I am trying to set label and image visible and diplay text in the label on click event on client side.

This is asp code:

 <td align="right">
     <asp:Image ID="AlertPic" runat ="server" Visible="false" ImageUrl="~/images/i_AlertWarning.png" />
     <asp:Label ID="lblError" runat ="server" Visible="false" CssClass="errorMessage"></asp:Label>
</td>

on javascript side:

function xx(sender,eventArgs){
     document.getElementById('lblError').style.visibility = "visible";
     document.getElementById('AlertPic').style.visibility = "visible";
     document.getElementById('lblError').innerHTML = "Please fill in Search Criteria";
}

This does not work.

i think you should refer below answer [how can i visible an invisible control with jquery](http://stackoverflow.com/questions/3025246/how-can-i-visible-an-invisible-control-with-jquery-hide-and-show-not-work) — Dhaval Pankhaniya, Apr 22 '16 at 13:48

score 0 · Answer 1 · answered Apr 22 '16 at 13:46

0

You can't since the Visible attribute controls the control's rendering. Perhaps you should hide it with some CSS instead.

answered Apr 22 '16 at 13:46

Daniel A. White

187,200
47
362
445

score 0 · Answer 2 · answered Apr 22 '16 at 13:49

0

You cant do visible (as the control will not be rendered, so no access to DOM), if you want to manipulate on the client side... Use CSS display style to "none" and then toggle it on the client.

<asp:Label ID="lblError" runat ="server" style="display:none" CssClass="errorMessage"></asp:Label>

To make it visible

document.getElementById('lblError').style.display = 'inherit';

TO hide it

document.getElementById('lblError').style.display = 'none';

answered Apr 22 '16 at 13:49

cableload

4,215
5
36
62

its possible that your clientid is different on the client side. have you tried this `'<%=lblError.ClientID %>'` instead of lblError ? – cableload Apr 22 '16 at 14:02

score 0 · Answer 3 · answered Apr 22 '16 at 13:49

The Visible property, when set to false, will cause your specific control to not be rendered in the DOM at all :

Gets or sets a value that indicates whether a server control is rendered as UI on the page.

Thus, if it isn't ever rendered, it will be inaccessible through Javascript. You are better off simply hiding the element through CSS via the display:none or visibility: hidden styles and then it will actually be rendered and accessible :

<asp:Image ID="AlertPic" ... style='visibility:none' />
<asp:Label ID="lblError" ... style='visibility:none'></asp:Label>

score 0 · Accepted Answer · answered Apr 22 '16 at 13:54

use a div with visibility = hidden OR visibility = visible insted.

<div id ="image" visibility = "hidden">

    <asp:Image ID="AlertPic" runat ="server" ImageUrl="~/images/i_AlertWarning.png" />
    <asp:Label ID="lblError" runat ="server" CssClass="errorMessage"></asp:Label>

</div>

now just set the div with id image to visible or hidden as it stands it is hidden by default

Jitendra Tiwari · Answer 5 · 2016-04-22T14:05:52.073

Update your html code

 <td align="right">
   <asp:Image ID="AlertPic" runat ="server" ImageUrl="~/images/i_AlertWarning.png" style="display:none"  />
   <asp:Label ID="lblError" runat ="server" CssClass="errorMessage" style="display:none"></asp:Label>
 </td>

and your javascript code

   function xx(){
      document.getElementById('<%=lblError.ClientID %>').style.visibility = "visible";
      document.getElementById('<%=AlertPic.ClientID %>').style.visibility = "visible";
      document.getElementById('<%=lblError.ClientID %>').innerHTML = "Please fill in Search Criteria";
   }

Hope this is help you.

score 0 · Answer 6 · answered Apr 23 '16 at 05:24

     function CLick()
            {

                $("#<%=lblError.ClientID%>").toggleClass("visibleoff");


            };

 .visibleoff{
           display:none;
       }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td align="right">
     <asp:Image ID="AlertPic" runat ="server"  CssClass="" ImageUrl="../Content/img/images.jpg" onClick="CLick();" />
     <asp:Label ID="lblError" runat ="server" CssClass="errorMessage visibleoff" Text="hi this is the error"></asp:Label>
</td>

Use JQuery Selector and CSS Class

here is the Code For you just include in your code and try it hope it may help you

Setting the label to visible using javascript

6 Answers6