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?

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

Art · Accepted Answer · 2013-07-24 10:00:01Z

3

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;

answered Jul 24, 2013 at 10:00

Art

5923 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Reinstate Monica Cellio Over a year ago

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 Over a year ago

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?

Sirko · Accepted Answer · 2013-07-24 09:56:44Z

3

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

answered Jul 24, 2013 at 9:56

Sirko

74.3k19 gold badges157 silver badges194 bronze badges

Comments

BenMorel · Accepted Answer · 2013-11-24 12:45:02Z

1

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

edited Nov 24, 2013 at 12:45

BenMorel

37.1k53 gold badges208 silver badges339 bronze badges

answered Jul 24, 2013 at 10:33

zqillyc

213 bronze badges

Comments

Matthijs · Accepted Answer · 2013-07-24 12:13:13Z

0

Please use:

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

That should work fine.

edited Jul 24, 2013 at 12:13

answered Jul 24, 2013 at 9:56

Matthijs

1,1522 gold badges14 silver badges30 bronze badges

1 Comment

Reinstate Monica Cellio Over a year ago

That would call getProgress with a literal string... getProgress("' + uid + '");

Phong Vo · Accepted Answer · 2013-07-24 09:57:47Z

-1

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.

answered Jul 24, 2013 at 9:57

Phong Vo

1,0787 silver badges16 bronze badges

Collectives™ on Stack Overflow

Javascript function not defined within document.ready jquery code

5 Answers 5

2 Comments

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related