CODEWITHSUNDEEP
asp.netjqueryblur
Scorpion
Scorpion

Reputation: 4585

jquery .blur not working with morethen one textboxes. Firing on both fucus in and out

I am using jQuery .blur on ASP.NET's Textbox controls. My jQuery code is as bellow.

Problem is if I change the focus from TextBox1 to TextBox2 or vice versa. It fires both jQuery functions. But I only want them to fire when the focus the control loose the focus. Its working fine on one TextBox. But with two or more, on focus change it fire two functions.

Any suggestions please. Thanks in advance.

Regards

 $("#MainContent_TextBox1").blur(function () {
            $.ajax({
                type: "POST",
                url: document.location.pathname + '/Test',
                data: '{name: "' + $("#MainContent_TextBox1").val() + '" }',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    alert(msg.d);
                }
            });
    });

    $("#MainContent_TextBox2").blur(function () {

            $.ajax({
                type: "POST",
                url: document.location.pathname + '/Test',
                data: '{name: "' + $("#MainContent_TextBox2").val() + '" }',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    alert(msg.d);
                }
            });
    });

ASP.NET

<asp:TextBox ID="TextBox1" runat="server" Text="Text box 1"></asp:TextBox><br />
   <asp:TextBox ID="TextBox2" runat="server" Text="Text box 2"></asp:TextBox><br />
    <asp:TextBox ID="TextBox3" runat="server" Text="Text box 3"></asp:TextBox><br />
    <asp:Button ID="Button1" runat="server" Text="Button" /><br />

Browser Source

<input name="ctl00$MainContent$TextBox1" type="text" value="Text box 1"     id="MainContent_TextBox1" class="myclass" /><br />
<input name="ctl00$MainContent$TextBox2" type="text" value="Text box 2" id="MainContent_TextBox2" class="myclass" /><br />
<input name="ctl00$MainContent$TextBox3" type="text" value="Text box 3" id="MainContent_TextBox3" class="myclass" /><br />
<input type="submit" name="ctl00$MainContent$Button1" value="Button" id="MainContent_Button1" /><br />


<script type='text/javascript'>new Sys.WebForms.Menu({ element: 'NavigationMenu',     disappearAfter: 500, orientation: 'horizontal', tabIndex: 0, disabled: false });</script>

Upvotes: 1

Views: 1189

Answers (2)

Manse
Manse

Reputation: 38147

Firstly i would change your code .... to simplify it use a class on the TextBox control then do :

$('.yourclass').blur(function () {
    $.ajax({
        type: "POST",
        url: document.location.pathname + '/Test',
        data: '{name: "' + $(this).val() + '" }',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (msg) {
            alert(msg.d);
        }
    });
});

Then you dont have to create lots and lots of blur methods !

Here is an exmaple - and on this example you can see that the blur method works fine

Upvotes: 3

coolguy
coolguy

Reputation: 7954

$("#MainContent_TextBox1").bind('blur',function () {
            $.ajax({
                type: "POST",
                url: document.location.pathname + '/Test',
                data: '{name: "' + $("#MainContent_TextBox1").val() + '" }',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    alert(msg.d);
                }
            });
    });

    $("#MainContent_TextBox2").bind('blur',function () {

            $.ajax({
                type: "POST",
                url: document.location.pathname + '/Test',
                data: '{name: "' + $("#MainContent_TextBox2").val() + '" }',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    alert(msg.d);
                }
            });
    });

Upvotes: 0

Related Questions