Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

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

Posted on 2014-09-19
24
171 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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
RegEx with optional part 4 42
Formula for calculating ROI on training 6 49
Sending an input value from a view to a controller in MVC 3 22
JSON Deserialize issue 6 26
IntroductionWhile developing web applications, a single page might contain many regions and each region might contain many number of controls with the capability to perform  postback. Many times you might need to perform some action on an ASP.NET po…
Entity Framework is a powerful tool to help you interact with the DataBase but still doesn't help much when we have a Stored Procedure that returns more than one resultset. The solution takes some of out-of-the-box thinking; read on!
Two types of users will appreciate AOMEI Backupper Pro: 1 - Those with PCIe drives (and haven't found cloning software that works on them). 2 - Those who want a fast clone of their boot drive (no re-boots needed) and it can clone your drive wh…

856 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