Asp.net TextBox Hide using JQuery ? : The Official Microsoft ASP.NET Forums

Reply

Asp.net TextBox Hide using JQuery ?

Jan 18, 2013 07:54 AM|LINK

// JQuery for hide Label

 $(document).ready(function () {
            $("#Button1").click(function () {
                    $("#Label1").hide(3000);
             });
 });

// asp.net button and Label

<asp:Button ID="Button1" runat="server" Text="Hi hello !!!" />

<asp:Label ID="Label1" runat="server" Text="How Are You ? Fine.. Thank you !!"></asp:Label>

My Aim is, when i Click the button It should hide the Label..

The JQuery Function Works perfectly.... I checked it with alertBox

But Asp.net Label can't hide...

May it because of asp.net controls are server side... [if it is another reason for can't hide, pls mention it]...

But what i need is, if i mention like below,

  $("#Label1").hide(3000);

then, it should slowly hide for 3000 ms...[after that it'll again repopulate]...

but here it hide in 1 ms...

What's happening there ?

Thankx In Advance... :)

[Pls,, don't give link... if you explain me, it could be much better]

Regards
Jeeva Jsb.

[Mark as Answer on the post that helps you]

Edited by jeevajsb on Jan 18, 2013 07:59 AM

Reply

Re: Asp.net TextBox Hide using JQuery ?

Jan 18, 2013 08:44 AM|LINK

Use ClientID

// JQuery for hide Label

 $(document).ready(function () {
            $("#<%=Button1.ClientID%>").click(function () {
                    $("#<%=Label1.ClientID%>").hide(3000);
             });
 });

// asp.net button and Label

<asp:Button ID="Button1" runat="server" Text="Hi hello !!!" />

<asp:Label ID="Label1" runat="server" Text="How Are You ? Fine.. Thank you !!"></asp:Label>

http://techbrij.com

Reply

Re: Asp.net TextBox Hide using JQuery ?

Jan 18, 2013 08:45 AM|LINK

The issue is that when you click the button, the animation starts but the button causes a postback so the page refreshes. To stop the postback you make the click event return false. Also, you should use ClientID rather than referring to the controls by ID direct, as the ID the control gets might differ from the one you give the server control. If a control is inside another control, or using master pages etc then your javascript might stop working. Using ClientID ensures this never happens.

$(document).ready(function () {
            $("#<%=Button1.ClientID %>").click(function () {
                $("#<%=Label1.ClientID %>").hide(3000);
                return false;
            });
        });

Reply

jeevajsb

Member

159 Points

377 Posts

Re: Asp.net TextBox Hide using JQuery ?

Jan 18, 2013 08:53 AM|LINK

that's also not working

Regards
Jeeva Jsb.

[Mark as Answer on the post that helps you]

Reply

rimagandhi

Participant

1585 Points

509 Posts

Re: Asp.net TextBox Hide using JQuery ?

Jan 18, 2013 09:11 AM|LINK

try this

<html>
<head>
   <title>Jquery Change content of Div</title>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
   <script type="text/javascript" language="javascript">

   $("document").ready(function(){

    $("#Button1").click(function(){

    $("#content").hide();

    });

   });

   </script>

</head>
<body>
<div id="content">

This is text inside div

</div>
<asp:Label ID="content" runat="server" Text="How Are You ? Fine.. Thank you !!"></asp:Label>
<div>
    <input id="Button1" type="button" value="button" />
</div>
</body>
</html>

Mark this post as answer if it helps you!!!

Regards
Rima Gandhi.
Software Developer.

Reply

rimagandhi

Participant

1585 Points

509 Posts

Re: Asp.net TextBox Hide using JQuery ?

Jan 18, 2013 09:16 AM|LINK

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>

Mark this post as answer if it helps you!!!

Regards
Rima Gandhi.
Software Developer.

Marked as answer by Amy Peng - MSFT on Jan 29, 2013 01:09 AM

Reply

jeevajsb

Member

159 Points

377 Posts

Re: Asp.net TextBox Hide using JQuery ?

Jan 18, 2013 09:40 AM|LINK

rimagandhi
<button id="hide">Hide</button>
<button id="show">Show</button>

this is working for me too.... But the problem is,

it's HTML tag,, so its working perfectly
But when i use asp.net control it's not working... that's y asked... [
<asp:Button ID="Button1" runat="server" meta:resourcekey="Button1Resource1"
Text="Hi hello !!!" AutoPostBack="false" onclick="Button1_Click" /> ]

Regards
Jeeva Jsb.

[Mark as Answer on the post that helps you]