Question

I have followed the tutorial found Here to get the basic understanding of what the title says. So far, I have come to the conclusion that the $.getJSON simply isnt working.

I have withered my code down to this:

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

            var usernameUnavailableRow = $('#usernameUnavailableRow');
            var availabilityMessage = $('#availabilityMessage');

            $("#UserName").hover(function () {
                //usernameUnavailableRow.hide();
            });

            $("#UserName").blur(function () {
            $.getJSON('/OCDB/UsernameAvailable.aspx?' + escape($(this).val()), function (results) {
                if (results.available) {
                    alert("available"); //Just checking if anything even returns
                } else {
                    alert("not available"); //Just checking if anything even returns
                }
            });
        });
        });
    </script>

<table>
         <tr>
            <td>
               <input id="UserName"></input>
            </td>
         </tr>
         <tr id="usernameUnavailableRow">
            <td>
               <span id="availabilityMessage">k</span>
            </td>
         </tr>
</table>

And my UsernameAvailable.aspx page shows exactly this:
{ "available" : "false"}
While Using
<%@ Page Language="C#" CodeFile="UsernameAvailable.aspx.cs" Inherits="UsernameAvailable" ContentType="application/json" %>

Yet nothing is happening in the getJson event.

Can anyone please tell me where I am going wrong, as I am unable to see my mistake.

EDIT
Upon changing the code to remove the 404 error the Javascript produced (Thanks @Archer), the result now always returns True. I have checked to see the page was returning False on a taken username, and it works.

Answer 1

You overlooked this line on that link:

The UsernameAvailable.aspx page expects the desired username to be
supplied in the querystring, like so:
UsernameAvailable.aspx?desiredUsername.

You need to do this:

$.getJSON('UsernameAvailable.aspx?' + escape($(this).val()), function (results){
    if (results.available) {
        // available
    }
    else{
        // unavailable
    }
});