Hide Control using JQuery

Question

1.00/5 (1 vote)

See more:

Hi Friends.....

I am using this JQuery.

JavaScript

$(document).ready(function () {
           $("#btn_Add").click(function () {
               $("#TextBox2").css({ "background-color": "yellow", "font-size": "200%" });
               $("#TextBox1").css('visibility', 'hidden');

           });
       });

And ASP.net Control.

ASP.NET

<asp:Button ID="btn_Add" runat="server" Text="Add Records" />
 <asp:TextBox ID="TextBox1" runat="server">
 <asp:TextBox ID="TextBox2" runat="server">

But I press Button(btn_Add) some secound apply after refesh and as useally control display..
use this asp.net.

~~Please Fast reply me.~~

Posted 16-Apr-13 19:30pm

Abhai Oza

Updated 16-Apr-13 19:38pm

Manfred Rudolf Bihy

v2

Add a Solution

Comments

Rockstar_ 17-Apr-13 1:32am

not clear dear?
can u plz elaborate ur problem?

3 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sergey Alexandrovich Kryukov · Answer 1 · 2013-04-16T19:33:00

Solution 1

Why using so complicated way? Just use the methods .hide() and .show():
http://www.w3schools.com/jquery/jquery_hide_show.asp[^].

—SA

Posted 16-Apr-13 19:33pm

Sergey Alexandrovich Kryukov

Comments

Abhai Oza 17-Apr-13 1:36am

I know first i have check but use in asp.net not possible and page reload time as it as display after few second not minits.

Sergey Alexandrovich Kryukov 17-Apr-13 1:38am

Not clear what are you trying to say. This is a correct working solution.
—SA

Abhai Oza 17-Apr-13 1:40am

No...This Eg.use in asp.net after tell me.
Not working.

Sergey Alexandrovich Kryukov 17-Apr-13 1:43am

Why do you think it works for me? Anything special, in your case?
—SA

Manfred Rudolf Bihy 17-Apr-13 1:49am

OP is using the wrong ID. It's the server side ID and not the client side ID.
I showed him how to get the correct ID in my solution. :)

Sergey Alexandrovich Kryukov 17-Apr-13 1:52am

Clearly. Up-voted.
—SA

Manfred Rudolf Bihy 17-Apr-13 1:48am

jquery's show() and hide() methods were exactly made for that. 5+
:)

Sergey Alexandrovich Kryukov 17-Apr-13 1:51am

Thank you, Manfred.
Sure; can you explain it to OP. However, you've caught the problem, so now it should work.
—SA

Manfred Rudolf Bihy · Answer 2 · 2013-04-16T19:47:00

First of all I'd go along with SA's solution of using show() and hide() to achieve your goal. The next problem is that you are using the wrong ID. ID's of ASP.net tags with runat="server" are what identifies the tag on the server side. When that tag gets rendered by ASP.net and output to the client (browser) the id attribute will be a different one. The good thing is you can find out what exactly the client id attribute is by using this code:

NTML

$(document).ready(function () {
    $("#btn_Add").click(function () {
        $("#<%=TextBox2.ClientID %>").css({ "background-color": "yellow", "font-size": "200%" });
        $("#<%=TextBox1.ClientID %>").css('visibility', 'hidden');

    });
});

Regards,

— Manfred

Shubhashish_Mandal · Answer 3 · 2013-04-16T19:39:00

Solution 2

Here it is :

JavaScript

$(document).ready(function () {
   $("#btn_Add").click(function () {
     $("#TextBox2").css({ "background-color": "yellow", "font-size": "200%" });
     $("#TextBox1").css('display', 'none');
     //or you can try this
     $('#TextBox1').toggle();
  });
});

Posted 16-Apr-13 19:39pm

Shubhashish_Mandal