JavaScript functions not defined?

Question

For some reason, Firefox throws "function undefined" errors in this JS snippet:

$(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 my code and nothing seems to be wrong.

Answer 1

There is no reason to wrap your 3 functions in the finished shell of the document - nothing inside these functions (which can rely on the readiness of the document) is executed until they are called. In addition, wrapping them in a ready document, you force them to enter this function of announcements, and they cannot be used from the outside.

Unconnected, you should set your dataType to json for calls to $ .ajax and stop making manual calls in $ .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 3 functions inside a function that runs on DOMready and then goes out of scope, so do the functions.

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