CODEWITHSUNDEEP
c#jqueryasp.netasp.net-mvc-4
formatc
formatc

Reputation: 4323

Jquery bind events: blur, focus not working in mvc4

I found simple textbox watermark script that I was going to use in my project but I can't understand whats wrong, I tried debugging with Firebug and I can see it going through jquery code only once when page is loaded,after that textbox acts like nothing was binded to its focus or blur and I don't see any breakpoints getting hitted in script, here is whole layout page with script:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    <link href="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Content/css")" rel="stylesheet" type="text/css" />
    <link href="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Content/themes/base/css")" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Scripts/js")"></script>

    <style type="text/css">
    .water
    {
         font-family: Tahoma, Arial, sans-serif;
         color:gray;
    }
    </style>

    <script type="text/javascript">
        $(document).ready(function () {

            $(".water").each(function () {
                $tb = $(this);
                if ($tb.val() != this.title) {
                    $tb.removeClass("water");
                }
            });

            $(".water").focus(function () {
                $tb = $(this);
                if ($tb.val() == this.title) {
                    $tb.val("");
                    $tb.removeClass("water");
                }
            });

            $(".water").blur(function () {
                $tb = $(this);
                if ($.trim($tb.val()) == "") {
                    $tb.val(this.title);
                    $tb.addClass("water");
                }
            })
        });       

    </script>
</head>
<body>
  <div class="wrapper">
    <div id="messageBox" align="center">
    </div>
        <div class="header">
            <div class="header-column">
               <h1 id="logo" class="no-border"><a href="/"><img src="../../Content/themes/base/images/ps-logo.png" style="margin-top:10px;" alt="" /></a></h1>
            </div>
            <div class="header-column lh50" align="center">
                <div>
                    <input type="text" ID="txtSearch" class="water" title="Search" value="" />
                </div>
            </div>
            <div class="header-column">
                <div class="main-menu lh50">
                    <ul>
                        <li>
                           @if(!Request.IsAuthenticated)
                           {
                                    <a href="Login">Login using
                                        <img alt="Facebook" src="../../Content/themes/base/icons/facebook-icon.png" class="login-icon" />
                                        <img alt="Google" src="../../Content/themes/base/icons/google-icon.png" class="login-icon" />
                                        <img alt="Yahoo" src="../../Content/themes/base/icons/yahoo-icon.png" class="login-icon" />
                                    </a>  
                                    <span> or  </span>
                                    <a href="#">Register</a>
                           }
                           else{
                                    <span>@GetCurrentUsername(this.Context)</span>

                                    <a href="#">Log out</a>

                                    <a href="#">Post</a>

                                    }
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="clear">
        </div>
          @RenderBody()
      <div class="push">
        </div>
    </div>
    <div class="footer" align="center">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a class="active" href="#">Resources</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
        <p>
            Copyright © 2012 Domain - All rights reserved</p>
    </div>
</body>
</html>

Is there problem in mvc4, my code or something else?

Upvotes: 0

Views: 1048

Answers (2)

codeulike
codeulike

Reputation: 23064

You are using the same .water class to describe the set of textboxes that might have watermarks, and also to specifically turn the watermark on and off.

That could get messy, as when you attach the focus and blur events its no longer clear what the .water selector will find because you've already removed it from some textboxes.

Think it should be more like:

    $(document).ready(function () {

        $(".potentialwater").each(function () {
            $tb = $(this);
            if ($tb.val() != this.title) {
                $tb.removeClass("water");
            }
        });

        $(".potentialwater").focus(function () {
            $tb = $(this);
            if ($tb.val() == this.title) {
                $tb.val("");
                $tb.removeClass("water");
            }
        });

        $(".potentialwater").blur(function () {
            $tb = $(this);
            if ($.trim($tb.val()) == "") {
                $tb.val(this.title);
                $tb.addClass("water");
            }
        })
    });

Upvotes: 1

Darin Dimitrov
Darin Dimitrov

Reputation: 1038850

The script works, you just need to ensure that the value of the textbox is the same as the title initially:

<input type="text" ID="txtSearch" class="water" title="Search" value="Search" />

Because that's what you are checking here:

$(".water").each(function () {
    $tb = $(this);
    if ($tb.val() != this.title) {
        $tb.removeClass("water");
    }
});

And if the value is different than the title (in your case title="Search" and value="") you remove the water class and nothing will happen later.

Upvotes: 1

Related Questions