Jquery functions not working in .ascx pages

Question

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>

have you tried use an in browser debugger like firebug, or using a proxy debugger like fiddler2? — Antony Scott, Sep 17 '11 at 05:45
If any of the answers work for you make sure to mark it as the solution. — Cubicle.Jockey, Sep 17 '11 at 05:52
You can take your code and html and test it out here. http://jsfiddle.net/ to see if it works to make sure its nothing within the jquery it's self if you are not familiar with firebug. — Cubicle.Jockey, Sep 17 '11 at 06:03
@Francisco.. borrowed the code from google and checking with that.. =) — Prabhanjan, Sep 17 '11 at 14:00
@Cubicle..definetely will mark the reply as solution that works.. — Prabhanjan, Sep 17 '11 at 14:45
I think we need the HTML code too. It's hard to tell what's going on only from your jquery code. It seems to me it could be a problem with using UserNameAvailabilityButton.ClientID as your Id for your html object. — Francisco, Sep 17 '11 at 18:09
Apparently this cannot be done, check out this post: http://stackoverflow.com/questions/579024/calling-an-ascx-page-method-using-jquery — , Sep 26 '11 at 10:27

score 1 · Answer 1 · edited May 23 '17 at 12:29

1

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)

edited May 23 '17 at 12:29

Community

1
1

answered Sep 17 '11 at 05:44

Cubicle.Jockey

3,288
1
19
31

1

Your var declarations can be outside (it makes them "global" but @Cubicle is right - jQuery needs ready() (or a shortcut version thereof) to work. – Surreal Dreams Sep 17 '11 at 05:46
@Surreal and Antony, thanks for the suggestion will try giving that..could you also tell me how that works in .aspx without ready()..is there any differences for how jquerylooks into usercontrol and .aspx – Prabhanjan Sep 17 '11 at 14:43

score 1 · Answer 2 · answered Sep 17 '11 at 05:51

1

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.

answered Sep 17 '11 at 05:51

Antony Scott

21,690
12
62
94

You made a good point, but thing is the user registration screen in our project is from .ascx,for which i was trying to check..any suggestion to check in usercontrol is really gonna help..thanks in advance.. – Prabhanjan Sep 17 '11 at 13:57
It's been a while since I wrote a user control, but I'm sure you could have a property you could check in the event of a login failure, better still you could use an event and fire that within your control. – Antony Scott Nov 24 '11 at 20:31

score 1 · Answer 3 · edited May 23 '17 at 11:55

1

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.

edited May 23 '17 at 11:55

Community

1
1

answered Sep 17 '11 at 05:52

woodykiddy

6,074
16
59
100

Jquery functions not working in .ascx pages

3 Answers3