Question

I’m using this watermark plugin for jQuery. It works fine on every page except for my registration where it gets called 4 times. On the registration page I am getting a too much recursion error on line 57 of jQuery (one hosted on Google). I don’t think it’s jQuery that is the problem, though I think it has to do with my code or that plugin. Can you look to see if you see anything?

Code:

$(document).ready(function(){
    $(".text").addClass("idleField");
    $(".text").focus(function(){
        $(this).removeClass("idleField");
        $(this).addClass("focusField");
    });
    $(".text").blur(function(){
        $(this).removeClass("focusField");
        $(this).addClass("idleField");
    });
    $("#recaptcha_response_field").attr("tabindex","5");
    <?php if(!is_ie()){ ?>
    $("#username").watermark("Desired Username");
    $("#password").watermark("Password between 6 and 12 characters");
    $("#confirmPassword").watermark("Confirm Password");
    $("#email").watermark("Please insert a valid email");
    <?php } ?>
    $("#checkUser").click(function(){
           $("#results").html("<img src='images/loading.gif' alt='loading...' />loading...");
        var user = $("#username").attr("value");
        $.get("library/regUserCheck.php", {name: user}, function(data){
            $("#results").html(data);
        });
    });
    <?php if($error){ //Make error fade out ?>
           $("#errorField").delay(5000).fadeOut(1250);
    <?php } ?>
});

Answer 1

Too much recursion in your code, doesn’t that mean anything for you? Here’s the improved code:

$(function() {
    $(".text").addClass("idleField").focus(function () {
        $(this).removeClass("idleField").addClass("focusField");
    }).blur(function () {
        $(this).removeClass("focusField").addClass("idleField");
    });

    $("#recaptcha_response_field").attr("tabindex", "5");
    /*@cc_on
    var $username = $("#username");
    $username.watermark("Desired Username");
    $("#password").watermark("Password between 6 and 12 characters");
    $("#confirmPassword").watermark("Confirm Password");
    $("#email").watermark("Please insert a valid email");
    */
    $("#checkUser").click(function () {
        $("#results").html("<img src='images/loading.gif' alt='loading...' />loading...").load("library/regUserCheck.php", {
            name: $username.val()
        });
    });
    <?php if ($error) { /* Make error fade out */ ?>
        setTimeout(function () {
            $("#errorField").fadeOut(1250);
        }, 5000);
    <?php } ?>
});

Tips:

• You can use conditional comments (/*@cc_on … */) to handle IE, no need to do that with PHP.
• Never use a jQuery selector multiple times. jQuery needs to find that element in DOM multiple times. In most cases, you can use chaining, like this:

$('#el').click(function() {
    …
}).addClass('myClass');

If you can’t do that, cache it to a variable. Example:

var $el = $('#el');
$el.html('loading…');
setTimeout(function() {
    $el.load('/ajax/echo/html', {html: 'Hello, world!'});
}, 5000);

For example, if you want to specify more CSS rules for an element, this is the best syntax:

$('#el').css({
    'background-color': 'blue',
    color: 'white'
});

• This really depends on style and isn’t important, but you can use $(function() { as a shorthand for $(document).ready(function() {.

I hope that’s enough. 🙂