title: Javascript function not defined within document.ready jquery code
body: <p>I've included jquery in my script and am now trying to make a jquery version of this upload progress bar script: <a href="http://www.ultramegatech.com/2008/12/creating-upload-progress-bar-php/" rel="nofollow">http://www.ultramegatech.com/2008/12/creating-upload-progress-bar-php/</a></p>
  
  <p>Here's my attempt:</p>
  
  <pre><code>$(document).ready(function () {
  
      function startProgress(uid) {
          console.log("starting progress");
          setTimeout('getProgress("' + uid + '")', 500);
          //some more stuff
      }
  
      function getProgress(uid) {
          console.log("getting progress");
          $.ajax({
              type: "GET",
              url: 'upload_getprogress.php?uid=' + uid,
              success: function (msg) {
                  progress = msg;
                  setTimeout('getProgress("' + uid + '")', 100);
                  // do some more stuff
              }
  
          });
      }
  
      $('#upload').submit(function () {
          startProgress('&lt;?php echo $uid; ?&gt;');
      });
  });
  </code></pre>
  
  <p>But I'm getting this error:</p>
  
  <p><code>Uncaught ReferenceError: getProgress is not defined</code></p>
  
  <p>How is that? </p>
  
  <p>I tried to put the functions outside of <code>document.ready()</code>, but it didn't help. I even went and defined <code>getProgress</code> at the beginning of the inside of <code>startProgress</code> but it doesn't seem to recognize the function. What am I doing wrong?</p>