?
Solved

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

Posted on 2014-09-19
24
Medium Priority
?
185 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:Michael Sterling
[X]
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
  • 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:Michael Sterling
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:Michael Sterling
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
Give Your Engineering Team a Productivity Boost

Learn why container technology is so powerful and how it can provide your team with productivity gains and other benefits.

 
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:Michael Sterling
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:Michael Sterling
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:Michael Sterling
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:Michael Sterling
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:Michael Sterling
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:Michael Sterling
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:Michael Sterling
ID: 40333528
i found the debugger. had to select my form. never had to do that before.
0
 
LVL 1

Author Comment

by:Michael Sterling
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:Michael Sterling
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 2000 total points
ID: 40333546
See my comment above, .val() is for inputs, .text() is for divs, spans etc.
0
 
LVL 1

Author Comment

by:Michael Sterling
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:Michael Sterling
ID: 40333550
oh, i see, nevermind that last question. let me try that.
0
 
LVL 1

Author Comment

by:Michael Sterling
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:Michael Sterling
ID: 40333559
Thanks for your time, effort and patience.
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

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

Introduction This article shows how to use the open source plupload control to upload multiple images. The images are resized on the client side before uploading and the upload is done in chunks. Background I had to provide a way for user…
Calculating holidays and working days is a function that is often needed yet it is not one found within the Framework. This article presents one approach to building a working-day calculator for use in .NET.
Do you want to know how to make a graph with Microsoft Access? First, create a query with the data for the chart. Then make a blank form and add a chart control. This video also shows how to change what data is displayed on the graph as well as form…
Have you created a query with information for a calendar? ... and then, abra-cadabra, the calendar is done?! I am going to show you how to make that happen. Visualize your data!  ... really see it To use the code to create a calendar from a q…

719 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