Jquery functions not working in .ascx pages

I am trying to use jquery in .ascx page to communicate with webservice in order to check the username provided exists in the database or not. But for some reason the jquery functions are not loading, I tried using a debugger on it to check. I am able to do it in .aspx page with the same code, but not with .ascx. I am new to jquery, Please help.

The code am using is :

script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<style type="text/css">
    .available
    {
        color: Green;
    }
    .used
    {
        color: Red;
    }
    .required
    {
        color: Red;
    }
    .hide
    {
        display:none;
    }
</style>

<script type="text/javascript">
    var emptyUserNameMessage = 'Please enter the username';
    var progressUserNameMessage = 'Checking...';
    var availableUserNameMessage = 'Username is available';
    var usedUserNameMessage = 'Username has been taken';


    $(function() {
        var userNameAvailabilityLabel = $('#<%= UserNameAvailabilityLabel.ClientID %>');

        $('#<%= UserNameAvailabilityButton.ClientID %>').click(function() {
            var userNameTextBox = $('#<%= UserNameTextBox.ClientID %>');
            var userName = userNameTextBox.val();
            if ($.trim(userName) == '') {
                userNameAvailabilityLabel
                        .removeClass()
                        .addClass('required')
                        .html(emptyUserNameMessage);
            }
            else {
                userNameAvailabilityLabel.html('');
                $('#ProgressDiv').show();

                $.ajax({
    开发者_如何转开发                type: 'POST',
                    url: 'Sample.asmx/CheckUserNameAvailability',
                    data: '{userName: \'' + userNameTextBox.val() + '\'}',
                    contentType: 'application/json; charset=utf-8',
                    dataType: 'json',
                    success: OnCheckUserNameAvailabilitySuccess,
                    error: OnCheckUserNameAvailabilityError
                });
            }
            return false; //Prevent postback
        });

        function OnCheckUserNameAvailabilitySuccess(response) {
            $('#ProgressDiv').hide();
            if (response != null && response.d != null) {
                var data = response.d;
                switch (data) {
                    case 0:
                        userNameAvailabilityLabel
                        .removeClass()
                        .addClass('available')
                        .html(availableUserNameMessage);

                        break;
                    case 1:
                        userNameAvailabilityLabel
                        .removeClass()
                        .addClass('used')
                        .html(usedUserNameMessage);
                        break;
                }
            }
        }
        function OnCheckUserNameAvailabilityError(xhr, ajaxOptions, thrownError) {
            alert(xhr.statusText);
        }
    });

</script>

I don't think it's a good idea to be telling the user of your page/control whether or not a username is available or not, it's a potential security hole. You're basically telling an attacker what username(s) are valid/invalid without them needing to know the password(s) at all.

All jquery must live in this block of code.

 $(document).ready(function(){


});

EDIT

Antony brought up a good point.

Here are the three versions of performing ready. I did not notice that in his code.

$(document).ready(handler)
$().ready(handler) (this is not recommended)
$(handler)

I agree with Cubicle. Don't forget to wrap your JQuery code up in .ready().

You may also want to try Firebug to inspect your client script errors. Just run a few test to see what errors come up.