JavaScript functions not defined?

Question

For some reason, Firefox is throwing "function not defined" errors at this piece of JS:

    $(function() { // on document ready

function updateAlerts() {
   $.ajax({
      url : "/check.php",
      type : "POST",
      data : {
         method : 'checkAlerts'
      },
      success : function(data, textStatus, XMLHttpRequest) {
         var response = $.parseJSON(data);

         // Update the DOM to show the new alerts!
         if (response.friendRequests > 0) {
            // update the number in the DOM and make sure it is visible...
            $('#notifications').show().text(response.friendRequests);
         }
         else {
            // Hide the number, since there are no pending friend requests or messages
            var ablanknum = '0';
            $('#notifications').show().text(ablanknum);
         }

      }
   });
}

function friendRequestAlert() {
   $.ajax({
      url : "/check.php",
      type : "POST",
      data : {
         method : 'sendFriendAlert'
      },
      success : function(data, textStatus, XMLHttpRequest) {
         var response = $.parseJSON(data);

         if (response.theFRAlert !== '0') {
            // Display our fancy Javascript notification.
            $.jgrowl('' + response.theFRAlert + '');
         }

      }
   });
}

function messageAlert() {
   $.ajax({
      url : "/check.php",
      type : "POST",
      data : {
         method : 'sendMessageAlert'
      },
      success : function(data, textStatus, XMLHttpRequest) {
         var response = $.parseJSON(data);

         if (response.theAlert !== '0') {
            // Display our fancy Javascript notification.
            $.jgrowl('' + response.theAlert + '');
            $('#therearemessages').show().text(response.theAlert);
         }

      }
   });
}

});

I checked through my code and nothing seems to be wrong.

Answer 1

There is no reason to wrap your 3 functions in the document ready wrapper--nothing inside those functions (which may rely on the doc being ready) is executed until they are called. Further, by wrapping them in doc ready, you're forcing them into the scope of that anon function and they cannot be used from outside of it.

Unrelated, you should set your dataType to 'json' on the $.ajax calls and stop making manual calls to $.parseJSON.

New code:

function updateAlerts()
{
    $.ajax( {
        url: '/check.php',
        type: 'POST',
        data: {
            method: 'checkAlerts'
        },
        dataType: 'json',
        success: function( response )
        {
            // Update the DOM to show the new alerts!
            if( response.friendRequests > 0 )
            {
                // update the number in the DOM and make sure it is visible...
                $( '#notifications' ).show().text( response.friendRequests );
            }
            else
            {
                // Hide the number, since there are no pending friend requests or messages
                var ablanknum = '0';
                $( '#notifications' ).show().text( ablanknum );
            }
        }
    } );
}

function friendRequestAlert()
{
    $.ajax( {
        url: '/check.php',
        type: 'POST',
        data: {
            method: 'sendFriendAlert'
        },
        dataType: 'json',
        success: function( response )
        {
            if( response.theFRAlert !== '0' )
            {
                // Display our fancy Javascript notification.
                $.jgrowl('' + response.theFRAlert + '');
            }
        }
    } );
}

function messageAlert()
{
    $.ajax( {
        url: '/check.php',
        type : 'POST',
        data: {
            method : 'sendMessageAlert'
        },
        dataType: 'json',
        success: function( response )
        {
            if( response.theAlert !== '0' )
            {
                // Display our fancy Javascript notification.
                $.jgrowl('' + response.theAlert + '');
                $('#therearemessages').show().text(response.theAlert);
            }
        }
    } );
}

Answer 2

Scope in javascript is function based.

Since you define the 3 functions inside a function that is run on DOMready and then goes out of scope, so does the funcitons.

In other words: the 3 functions only exist inside the DOmready function, and you cannot use them from anywhere else outside that function.