JQuery : Calling a function inside Jquery(document) block

Problem :

Saw this error message in the browser's console while attempting to call a function inside JQuery(document) section resulted in this error message :

Uncaught ReferenceError: callFunctionInsideJquery is not defined

So, how does one call a function inside JQuery(document) section ?

Solution :

Enable the function be called globally. Add the JQuery window reserve word in front of the function you want to make it accessible globally. See :

 <script>
 function pressButton() {

 callFunctionInsideJquery("Yes, I'm here!");

 }


 jQuery(document).ready(function($) {

 // private function inside JQuery(document) block
  function callFunctionInsideJquery(msg) {
 $('#error').html(msg).hide().fadeIn(800);
  }

 }
 );
 </script>

to

 <script>
 function pressButton() {

  callFunctionInsideJquery("Yes, I'm here!");

 }

 jQuery(document).ready(function($) {

 // public function inside JQuery(document) block accessible globally with window
  window.callFunctionInsideJquery = function(msg) {
 $('#error').html(msg).hide().fadeIn(800);
  }

 }
 );
 </script>