Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 196
  • Last Modified:

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

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
Michael Sterling
Asked:
Michael Sterling
  • 15
  • 9
1 Solution
 
GaryCommented:
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
 
Michael SterlingWeb Applications DeveloperAuthor Commented:
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
 
Michael SterlingWeb Applications DeveloperAuthor Commented:
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
NFR key for Veeam Backup for Microsoft Office 365

Veeam is happy to provide a free NFR license (for 1 year, up to 10 users). This license allows for the non‑production use of Veeam Backup for Microsoft Office 365 in your home lab without any feature limitations.

 
GaryCommented:
No, you should only have one reference to the jquery library else you will get problems
0
 
Michael SterlingWeb Applications DeveloperAuthor Commented:
ok, that's what i was thinking. anything else look out of place/wrong?
0
 
GaryCommented:
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
 
Michael SterlingWeb Applications DeveloperAuthor Commented:
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
 
GaryCommented:
Can you post the rendered HTML or link to the page.
0
 
Michael SterlingWeb Applications DeveloperAuthor Commented:
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
 
Michael SterlingWeb Applications DeveloperAuthor Commented:
sure, you want all of the rendered HTML?
0
 
GaryCommented:
In Firebug you can add breakpoints anywhere
0
 
GaryCommented:
Just the relevant HTML
0
 
Michael SterlingWeb Applications DeveloperAuthor Commented:
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
 
Michael SterlingWeb Applications DeveloperAuthor Commented:
ok, (about the firebug comment), i thought so.
0
 
GaryCommented:
That is working fine. But what is this supposed to be
subject.text(completed);
0
 
Michael SterlingWeb Applications DeveloperAuthor Commented:
i found the debugger. had to select my form. never had to do that before.
0
 
Michael SterlingWeb Applications DeveloperAuthor Commented:
This:

subject.text(completed);

I thought would assign the value to the text box represented by: subject. No?
0
 
GaryCommented:
$(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
 
Michael SterlingWeb Applications DeveloperAuthor Commented:
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
 
GaryCommented:
See my comment above, .val() is for inputs, .text() is for divs, spans etc.
0
 
Michael SterlingWeb Applications DeveloperAuthor Commented:
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
 
Michael SterlingWeb Applications DeveloperAuthor Commented:
oh, i see, nevermind that last question. let me try that.
0
 
Michael SterlingWeb Applications DeveloperAuthor Commented:
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
 
Michael SterlingWeb Applications DeveloperAuthor Commented:
Thanks for your time, effort and patience.
0

Featured Post

Prepare for your VMware VCP6-DCV exam.

Josh Coen and Jason Langer have prepared the latest edition of VCP study guide. Both authors have been working in the IT field for more than a decade, and both hold VMware certifications. This 163-page guide covers all 10 of the exam blueprint sections.

  • 15
  • 9
Tackle projects and never again get stuck behind a technical roadblock.
Join Now