Seems Jquery code not recognizing TextBox available inside asp.net webpage

Question

0.00/5 (No votes)

See more:

This is The Design View Code

XML

<div style="border:2px solid white;height:400px;width:155%;margin-left:-530px;margin-top:-40px;border-radius:15px;">

            <table style="width: 350px">
                <tr>
                    <td class="auto-style16" rowspan="6">
                        </td>
                    <td class="auto-style17">Member's login</td>
                </tr>
                <tr>
                    <td class="auto-style19">
                        User Name</td>
                </tr>
                <tr>
                    <td class="auto-style21">
                        <asp:TextBox ID="TextBox1" runat="server" CssClass="textEntry" Height="25px"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td>
                        Password</td>
                </tr>
                <tr>
                    <td class="auto-style23">
                        <asp:TextBox ID="TextBox2" runat="server" CssClass="textEntry" TextMode="Password"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td class="auto-style15">
                        <asp:Button ID="btnLogin" runat="server" Text="Sign in" Width="79px" OnClick="btnLogin_Click" />
                    </td>
                </tr>
                <tr>
                    <td class="auto-style9" colspan="2"><asp:Label ID="lblMessage" runat="server" /></td>
                </tr>
                <tr>
                    <td class="auto-style9" colspan="2">&nbsp;</td>
                </tr>
                <tr>
                    <td class="auto-style9" colspan="2">* In case of Sign in problem must contact system admin</td>
                </tr>
            </table>

        </div>

I am trying Jquery Code is

XML

<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script>
        $(document).ready(function () {
            $('#TextBox1').width(150);
            $('#TextBox1').focus(function () {
                $(this).animate({
                    width: 250,
                    height: 20
                })
                .delay(100)
            });
            $('#TextBox1').blur(function () {
                $(this).animate({
                    width: 150,
                    height: 15
                })
                .delay(100)
            });
        });
    </script>

When I m running my page it's show normally when i am clicking in textbox it's not showing animation

Any help i appreciate...
Thank you..
Regards: Anjanee

Posted 18-Oct-13 2:58am

Anjanee Kumar Singh

Add a Solution

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)

farogh haider · Answer 1 · 2013-10-18T20:11:00

Solution 3

Try this,

To access textbox1 use

$('input[id$="TextBox1"]')

Posted 18-Oct-13 20:11pm

farogh haider

JoCodes · Answer 2 · 2013-10-18T07:49:00

Solution 2

Can you try something like

C#

var setWidth= '2500px';
var setHeight= '100px';

C#

$(document).ready(function() {
  $('.TxtBoxClass').click(function(){
    //animate the box
    $(this).animate({
      width: setWidth,
      height: setHeight
    }, 800 )
   
  });

Posted 18-Oct-13 7:49am

JoCodes

Timberbird · Answer 3 · 2013-10-18T03:26:00

Solution 1

You seem to select TextBox by ID incorrectly. $('#TextBox1') won't return anything since even though your server control ID is "TextBox1", element ID on the client side will be "[long combination of ids]_TextBox1". Use

JavaScript

$('#<%=TextBox1.ClientID %>')

construction instead

Posted 18-Oct-13 3:26am

Timberbird

Updated 18-Oct-13 3:27am

v2

Comments

Harshil_Raval 18-Oct-13 9:28am

+5 :)

Anjanee Kumar Singh 18-Oct-13 9:42am

As you mentioned aboved code i tried but didn't work and the long combination of id is ( For example : <input name="ctl00$ContentPlaceHolder1$TextBox1" type="text" id="ContentPlaceHolder1_TextBox1" class="textEntry" style="height:25px;" />
).I tried with id(id="ContentPlaceHolder1_TextBox1") too but didn't work out.........

Timberbird 18-Oct-13 9:51am

Ok, when you view page source and see this id="ContentPlaceHolder1_TextBox1", can you check the code and make sure textbos ID is actually "ContentPlaceHolder1_TextBox1"? If it is, your problem is not in incorrect ID. Also, have you checked your browser console? Does it contain any error messages?

Anjanee Kumar Singh 18-Oct-13 10:05am

I checked id is as i said and browser console doesn,t have any error and i test it on IE,Mozilla,Chrome too

Timberbird 19-Oct-13 6:03am

I meant see the Java Script code. Do IDs match (i.e. script contains the line $('#ContentPlaceHolder1_TextBox1').width(150); line)?