Solved

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

Posted on 2014-09-19
24
160 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
 
LVL 58

Expert Comment

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

Author Comment

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

Expert Comment

by:Gary
Comment Utility
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
Comment Utility
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
Comment Utility
Can you post the rendered HTML or link to the page.
0
 
LVL 1

Author Comment

by:mikesExpertExchange
Comment Utility
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
Comment Utility
sure, you want all of the rendered HTML?
0
 
LVL 58

Expert Comment

by:Gary
Comment Utility
In Firebug you can add breakpoints anywhere
0
 
LVL 58

Expert Comment

by:Gary
Comment Utility
Just the relevant HTML
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 1

Author Comment

by:mikesExpertExchange
Comment Utility
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
Comment Utility
ok, (about the firebug comment), i thought so.
0
 
LVL 58

Expert Comment

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

Author Comment

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

Author Comment

by:mikesExpertExchange
Comment Utility
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
Comment Utility
$(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
Comment Utility
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
Comment Utility
See my comment above, .val() is for inputs, .text() is for divs, spans etc.
0
 
LVL 1

Author Comment

by:mikesExpertExchange
Comment Utility
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
Comment Utility
oh, i see, nevermind that last question. let me try that.
0
 
LVL 1

Author Comment

by:mikesExpertExchange
Comment Utility
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
Comment Utility
Thanks for your time, effort and patience.
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

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…
User art_snob (http://www.experts-exchange.com/M_6114203.html) encountered strange behavior of Android Web browser on his Mobile Web site. It took a while to find the true cause. It happens so, that the Android Web browser (at least up to OS ver. 2.…
When you create an app prototype with Adobe XD, you can insert system screens -- sharing or Control Center, for example -- with just a few clicks. This video shows you how. You can take the full course on Experts Exchange at http://bit.ly/XDcourse.
This video explains how to create simple products associated to Magento configurable product and offers fast way of their generation with Store Manager for Magento tool.

762 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

Need Help in Real-Time?

Connect with top rated Experts

7 Experts available now in Live!

Get 1:1 Help Now