I've included jquery in my script and am now trying to make a jquery version of this upload progress bar script: /

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?

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./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?

• javascript
• jquery
• function
• scope
• anonymous-function

• there is the error of setTimeout function syntax so correct that syntax it will work perfectly. – Dhaval Bharadva Commented Jul 24, 2013 at 10:00

5 Answers 5

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;

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);

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

Please use:

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

That should work fine.

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.