Solved

Why is my .blur() not triggering my alert?

Posted on 2014-09-19
24
168 Views
Last Modified: 2014-09-19
How do I use jQuery to auto populate a text box when another text box has some value (any value) in it? I don't want text box 2 to populate with anything unless, when the user leaves text box 1, text box one has a value. As I'm stumbling through this jQuery attempt, currently, I can't even get the .blur() to fire. Here's my script:

    <script type="text/javascript">
        $("#txtToEmailAddresses").blur(function () {
            alert("Handler for .blur() called.");
        });
    </script>

here's my HTML:

            <div class="divHRMainSection" id="divEmailTo">
                <asp:Label ID="lblToEmailAddresses" runat="server" Text="CC:" />
                <asp:TextBox ID="txtToEmailAddresses" runat="server" Width="400px" OnTextChanged="txtToEmailAddresses_TextChanged" />
            </div>

I'm doin this step by step so i'll add text box 2 and the value to it, after i get this piece working.
0
Comment
Question by:mikesExpertExchange
  • 15
  • 9
24 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 40333435
I would guess the code is before the HTML, wrap your function in a doc ready
    <script type="text/javascript">
$(function(){
         $("#txtToEmailAddresses").blur(function () {
             alert("Handler for .blur() called.");
         });
})
     </script>

Open in new window

0
 
LVL 1

Author Comment

by:mikesExpertExchange
ID: 40333444
Still no go:

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <link type="text/css" rel="stylesheet" href="Styles/UARForm.css" />
    <style type="text/css">
        .disabledBold
        {
            font-weight: bold;
            color: #000;
        }
        .alertMessage
        {
            font-weight: bold;
            color: RED;
        }
        .logOffLink
        {
            margin: 0 0 0 200px;
        }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
    <script type="text/javascript">
        $(document).ready(function () {
            $("#txtToEmailAddresses").blur(function () {
                alert("Handler for .blur() called.");
            });
        });
    </script>
    <asp:Panel ID="pnlManager" runat="server">
     .
     .
     .
            <div class="divHRMainSection" id="divEmailTo">
                <asp:Label ID="lblToEmailAddresses" runat="server" Text="CC:" />
                <asp:TextBox ID="txtToEmailAddresses" runat="server" Width="400px" OnTextChanged="txtToEmailAddresses_TextChanged" />
            </div>

Open in new window

0
 
LVL 1

Author Comment

by:mikesExpertExchange
ID: 40333448
my site master contains this reference:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

so i don't think i need it in the child page too, correct?
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <link type="text/css" rel="stylesheet" href="Styles/UARForm.css" />
    <style type="text/css">
        .disabledBold
        {
            font-weight: bold;
            color: #000;
        }
        .alertMessage
        {
            font-weight: bold;
            color: RED;
        }
        .logOffLink
        {
            margin: 0 0 0 200px;
        }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
    <script type="text/javascript">
        $(document).ready(function () {
            $("#txtToEmailAddresses").blur(function () {
                alert("Handler for .blur() called.");
            });
        });
    </script>
    <asp:Panel ID="pnlManager" runat="server">
     .
     .
     .
            <div class="divHRMainSection" id="divEmailTo">
                <asp:Label ID="lblToEmailAddresses" runat="server" Text="CC:" />
                <asp:TextBox ID="txtToEmailAddresses" runat="server" Width="400px" OnTextChanged="txtToEmailAddresses_TextChanged" />
            </div>

Open in new window

0
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
LVL 58

Expert Comment

by:Gary
ID: 40333457
No, you should only have one reference to the jquery library else you will get problems
0
 
LVL 1

Author Comment

by:mikesExpertExchange
ID: 40333465
ok, that's what i was thinking. anything else look out of place/wrong?
0
 
LVL 58

Expert Comment

by:Gary
ID: 40333475
Yes, you have runat="server" in your textboxes - this will change the id when teh page is processed so txtToEmailAddresses will be a different ID
Change
$("#txtToEmailAddresses").blur(function () {

to
$("[id$=txtToEmailAddresses]").blur(function () {
0
 
LVL 1

Author Comment

by:mikesExpertExchange
ID: 40333492
Ok. that worked. So I put in my other code which is:

        $(document).ready(function () {
            $("[id$=txtToEmailAddresses]").blur(function () {
                //alert("Handler for .blur() called.");
                var empName = $("[id$=txtEmpName]").text();
                var subject = $("[id$=txtSubject]");
                var completed = 'Completed UAR for: ' + empName;
                subject.text(completed);
            });
        });


HTML


                <div class="divEmpName">
                    <asp:Label ID="lblEmpName" runat="server" Text="Employee Name: " />
                    <asp:TextBox ID="txtEmpName" runat="server" Width="200px" MaxLength="50" />
                </div>
            <div class="divHRMainSection" id="divEmailTo">
                <asp:Label ID="lblToEmailAddresses" runat="server" Text="CC:" />
                <asp:TextBox ID="txtToEmailAddresses" runat="server" Width="400px" />
            </div>
            <div class="clear" />
            <div class="divHRMainSection" id="divEmailSubject">
                <asp:Label ID="lblSubject" runat="server" Text="Subject:" />
                <asp:TextBox ID="txtSubject" runat="server" Width="400px" />
            </div>

but when i leave the txtToEmailAddresses, nothing happens. what am i doing wrong?!
0
 
LVL 58

Expert Comment

by:Gary
ID: 40333497
Can you post the rendered HTML or link to the page.
0
 
LVL 1

Author Comment

by:mikesExpertExchange
ID: 40333498
also, in firefox, isn't there a way to step through the debugger for script code (jQuery / javascript)? i know there is but i've forgotten how.
0
 
LVL 1

Author Comment

by:mikesExpertExchange
ID: 40333499
sure, you want all of the rendered HTML?
0
 
LVL 58

Expert Comment

by:Gary
ID: 40333502
In Firebug you can add breakpoints anywhere
0
 
LVL 58

Expert Comment

by:Gary
ID: 40333506
Just the relevant HTML
0
 
LVL 1

Author Comment

by:mikesExpertExchange
ID: 40333510
my first text box:

<input id="MainContent_txtEmpName" type="text" style="width:200px;" maxlength="50" value="TEST EMP-one" name="ctl00$MainContent$txtEmpName">

my script:

<script type="text/javascript">
$(document).ready(function () {
$("[id$=txtToEmailAddresses]").blur(function () {
//alert("Handler for .blur() called.");
var empName = $("[id$=txtEmpName]").text();
var subject = $("[id$=txtSubject]");
var completed = 'Completed UAR for: ' + empName;
subject.text(completed);
});
});
</script>

my other two text boxes:

<div id="divEmailTo" class="divHRMainSection">
<span id="MainContent_lblToEmailAddresses">CC:</span>
<input id="MainContent_txtToEmailAddresses" type="text" style="width:400px;" name="ctl00$MainContent$txtToEmailAddresses">
</div>
<div class="clear">
<div id="divEmailSubject" class="divHRMainSection">
<span id="MainContent_lblSubject">Subject:</span>
<input id="MainContent_txtSubject" type="text" style="width:400px;" name="ctl00$MainContent$txtSubject">Completed UAR for: </input>
</div>

Open in new window

0
 
LVL 1

Author Comment

by:mikesExpertExchange
ID: 40333514
ok, (about the firebug comment), i thought so.
0
 
LVL 58

Expert Comment

by:Gary
ID: 40333521
That is working fine. But what is this supposed to be
subject.text(completed);
0
 
LVL 1

Author Comment

by:mikesExpertExchange
ID: 40333528
i found the debugger. had to select my form. never had to do that before.
0
 
LVL 1

Author Comment

by:mikesExpertExchange
ID: 40333532
This:

subject.text(completed);

I thought would assign the value to the text box represented by: subject. No?
0
 
LVL 58

Expert Comment

by:Gary
ID: 40333539
$(document).ready(function () {
$("[id$=txtToEmailAddresses]").blur(function () {
//alert("Handler for .blur() called.");
var empName = $("[id$=txtEmpName]").val();
var subject = $("[id$=txtSubject]");
var completed = 'Completed UAR for: ' + empName;
subject.val(completed);
});
});

Open in new window

0
 
LVL 1

Author Comment

by:mikesExpertExchange
ID: 40333545
now that i can step through it with the debugger ;-), i noticed though, that for some reason, this line:

var empName = $("[id$=txtEmpName]").text();

isn't getting any value from that text box, and there is something in that text box. so i think that's my culprit. any ideas why it wouldn't grab the value? its a regular string (text) value.
0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 40333546
See my comment above, .val() is for inputs, .text() is for divs, spans etc.
0
 
LVL 1

Author Comment

by:mikesExpertExchange
ID: 40333547
Thanks the .val did get me the: "Completed UAR for: " part. Still, for some reason, missing the value from the text box. Any ideas why?
0
 
LVL 1

Author Comment

by:mikesExpertExchange
ID: 40333550
oh, i see, nevermind that last question. let me try that.
0
 
LVL 1

Author Comment

by:mikesExpertExchange
ID: 40333556
Thank you for your time and your patience. That did it. Gotta get my jQuery "sea legs" back. its been a while. but i learned a couple things today so it was worth it. thanks again.
0
 
LVL 1

Author Closing Comment

by:mikesExpertExchange
ID: 40333559
Thanks for your time, effort and patience.
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Exception Handling is in the core of any application that is able to dignify its name. In this article, I'll guide you through the process of writing a DRY (Don't Repeat Yourself) Exception Handling mechanism, using Aspect Oriented Programming.
Performance in games development is paramount: every microsecond counts to be able to do everything in less than 33ms (aiming at 16ms). C# foreach statement is one of the worst performance killers, and here I explain why.
Along with being a a promotional video for my three-day Annielytics Dashboard Seminor, this Micro Tutorial is an intro to Google Analytics API data.
Established in 1997, Technology Architects has become one of the most reputable technology solutions companies in the country. TA have been providing businesses with cost effective state-of-the-art solutions and unparalleled service that is designed…

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question