Javascript function not defined within document.ready jquery code

Question

I've included jquery in my script and am now trying to make a jquery version of this upload progress bar script: http://www.ultramegatech.com/2008/12/creating-upload-progress-bar-php/

Here's my attempt:

$(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('<?php echo $uid; ?>');
 });
});

But I'm getting this error:

Uncaught ReferenceError: getProgress is not defined

How is that?

I tried to put the functions outside of document.ready(), but it didn't help. I even went and defined getProgress at the beginning of the inside of startProgress but it doesn't seem to recognize the function. What am I doing wrong?

• Dhaval Bharadva: there is the error of setTimeout function syntax so correct that syntax it will work perfectly.

Answer 1

Haven't been able to double-check, but I'm guessing it's because of the scope of the submit callback. Try something along these lines;

$(document).ready(function(){ 
 $('#upload').submit(function(){ window.startProgress('<?php echo $uid; ?>'); });
});
var startProgress = function(uid) {
 console.log("starting progress");
 setTimeout('getProgress("' + uid + '")', 500);
 //some more stuff
};
var getProgress = function(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
 }
 });
};
window.startProgress = startProgress;
window.getProgress = getProgress;

• Reinstate Monica Cellio: You don't need to define the functions as variables and then later define window.function = function, but other than that this should do the trick, so +1 :)
• user961627: Thanks, it's working now. But what's the reason that my code wasn't working? Earlier, I did try to keep the functions outside of document.ready() and leave the $('#upload').submit() code inside, but even that didn't work. how did simply changing the definition of the functions to var = function() make all the difference?

Answer 2

getProgress() is defined within the scope of the callback to document.ready(). If you pass a string argument to setTimeout() this is evaluated in the global scope. So you method is not visible from there.

You could change your code, to use an anonymous function like this:

 setTimeout( function() {
 getProgress( uid); 
 }
 , 100);

Answer 3

if you use the setTimeout function like
setTimeout('getProgress("' + uid + '")',500),

you must put the function getProgress in global scope , if you use setTimeout function like setTimeout( getProgress(uid),500),

you can define the function getProgress inside jQuery ready function

Answer 4

Please use:

setTimeout(function() { getProgress( uid ); }, 500 )

That should work fine.

• Reinstate Monica Cellio: That would call getProgress with a literal string... getProgress("' + uid + '");

Answer 5

function getProgress(uid) is defined inside $(document).ready() so that it is in the private scope not in global scope. So to use it, just move it to global.