CODEWITHSUNDEEP
javascriptjquery
Saint Robson
Saint Robson

Reputation: 5525

My Code Works On jQuery 1.3.2 But Not on 1.6.4

I have this following codes that works perfectly on jQuery 1.3.2 :

        $("#passwordLabel").click(function()
            {
                $(this).hide();
                $("#password").focus();
            }
        );

        $("#confirmpasswordLabel").click(function()
            {
                $(this).hide();
                $("#confirmpassword").focus();
            }
        );

        $("#password").focus(function()
            {
                $("#passwordLabel").hide();
            }
        );

        $("#confirmpassword").focus(function()
            {
                $("#confirmpasswordLabel").hide();
            }
        );

        $("#password").blur(function()
            {
                if($(this).val()=="")
                {
                    $("#passwordLabel").show();
                }
            }
        );

        $("#confirmpassword").blur(function(value)
            {
                if($(this).val()=="")
                {
                    $("#confirmpasswordLabel").show();
                }
            }
        );
    });

but unfortunately, this codes doesn't work anymore when I change my jQuery Library into version 1.6.4.

is that because jQuery 1.6.4 doesn't have that syntax anymore?

Upvotes: 0

Views: 468

Answers (2)

Yansen
Yansen

Reputation: 1

Many thanks for answering the question.

I believe there is no logic error on our previous code before. I applied your code and it still act the same... I think there is a problem with the jQuery version 1.3.2 and 1.6.4 as we use both of them.

Let me add a little bit information to this problem that might be the cause of the problem:

We are building a registration page that requires validation using jQuery. On that page, we also use jQuery slider.

So the page structures look like this :

Please check this image : http://img72.imageshack.us/img72/1111/structured.png

  1. landing-header.php (include jQuery-1.6.4.min.js and sliders code)

  2. landing-page.php (include landing-header.php, include jQuery.js (jQuery 1.3.2) and form validation code - including the password field)

So we use landing-page.php to test the page (which also include landing-header.php).

Problem is, when we include the jQuery 1.3.2, the password label does re-appear, but the slider from landing-header.php doesn't work.

When we remove the include jQuery 1.3.2, the slider animations work well, but the password label doesn't reappear even with using your code.

Upvotes: 0

Robert Hurst
Robert Hurst

Reputation: 9092

Fine name you have there by the way.

It looks like your new to JavaScript. Let me give you some pointers. Firstly you should try to reduce the number of times you ask the browser for an element. With jQuery all you have to do is save the selected element to a variable. I personally like to prepend my element variables with $ so I know that there jQuery elements.

//too many selections
$('element').foo(); //query 1
$('element').bar(); //query 2
$('element').baz(); //query 3

//better
$element = $('element'); //query 1
$element.foo();
$element.bar();
$element.baz();

The second thing is that you should always keep your { on the same line as the start of your block. In most languages this doesn't matter and in a lot of cases it will work in JavaScript but because of semicolon insertion its best to keep your { on the same line.

//one example of why this is bad
return
{
    "foo": "bar"
};

//The above actually becomes
return;
{
    "foo": "bar"
};

//should have actually been
return {
    "foo": "bar"
};

The last thing I noticed is that your having javascript focus each input when the corresponding label is clicked. This can actually be done without JavaScript. All you need to do is add the for attribute to your labels. They should be set to the id of there corresponding input.

<!-- from this -->
<label id="passwordLabel">Password</label>
<input id="password" type="password">

<!-- to this -->
<label id="passwordLabel" for="password">Password</label>
<input id="password" type="password">

Anyway provided you fixed your html the following should do the trick.

//Wait for the page to load
$(function() {
    var $passwordLabel, $confirmpasswordLabel, $password, $confirmpassword;

    //Pre select the form elements
    $passwordLabel = $("#passwordLabel");
    $password = $("#password");
    $confirmpasswordLabel = $("#confirmpasswordLabel");
    $confirmpassword = $("#confirmpassword");

    //bind events for the password input
    $password.focus(function() {
        //on focus hide the label
        $passwordLabel.hide();
    });
    $password.blur(function() {
        if(!$password.val()) {
            //if the input is empty then restore the label on blur
            $passwordLabel.show();
        }
    });

    //bind events for the confirm password input
    $confirmpassword.focus(function() {
        //on focus hide the label
        $confirmpasswordLabel.hide();
    });
    $confirmpassword.blur(function() {
        if(!$confirmpassword.val()) {
            //if the input is empty then restore the label on blur
            $confirmpasswordLabel.show();
        }
    });
});​

If you want to see some working code I made you a jsFiddle with the example above and some sample inputs: http://jsfiddle.net/wef85/8/

Upvotes: 2

Related Questions