Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Mar 2009
    Posts
    116
    Thanks
    29
    Thanked 1 Time in 1 Post

    Ajax function not working.

    When the upload form submit button is pressed, the upload of the file starts and i execute an ajax request to uploadprogress.php to get the current progress(it returns a number between 0 and 100, 100 means the upload is complete.)

    The idea is that getProgress() function would be self-executed over and over again until the result returned from uploadprogress.php is 100, but updating the progress bar width each time to show the progress to the user

    anyways, this is not working and i have not idea why. The furthest debugging i reached ended in the $.ajax() method which is wroken or sth.

    This short video shows what the result should be: http://screenr.com/ByG


    This is the current testing page: http://gotune.to/test/index.php


    The script:
    PHP Code:
            //Start progress tracking when the form is submitted
            
    $('#UploadForm').submit(function() {

                
    //Start updating progress after a 2 second delay.
                //This is to prevent the getprogress.php assume that upload is complete. 
                
    setTimeout(function () {
                    
    // We pass the upload identifier to our function
                    
    getProgress($('#uid').val());
                }, 
    2000);

            });


            
    //Function used to get the current upload progress.
            //It should be executed over and over again untill the result returned is 100.
            
    function getProgress(id) {

                
    //Make an ajax request to the server.
                
    $.ajax({
                
                    
    //Pass the data trought GET method.
                    
    type"GET",
                    
                    
    dataType'json',
                    
                    
    //Get the progress from this php file.
                    
    url"getprogress.php",                         
                    
                    
    //Pass our upload identifier as a parameter and current time to prevent caching.
                    
    data"uid="id
                    
                    
    //Get the results.
                    
    success: function (d) {

                        
    //Get the output as an integer.
                        
    var progress parseInt(d10);

                        
    //If upload progress is not 100, change bar percentage and update again.
                        
    if (progress 100) {

                            
    //Update the progress bar percentage.
                            //But only if we have started.
                            
    $('#ProgressBar').css('width'progress '%');

                    
                            
    //If we aren't done, update again.
                            
    getProgress(id);

                        }
                    }
                });

            }

        }); 
    Any ideas are welcome

    thanks in advance

    hernantz
    Last edited by hernantz; 12-25-2010 at 06:03 PM.

  • #2
    Regular Coder
    Join Date
    Mar 2009
    Posts
    116
    Thanks
    29
    Thanked 1 Time in 1 Post
    Ok got this working on firefox and ie.

    But its not working on chorme

    this is how the getProgress() function ended up.


    PHP Code:
    //Function used to get the current upload progress.
    //It should be executed over and over again untill the result returned is 100.
    function getProgress(id) {
        
        
    //Make an ajax request to the server.
        
    $.ajax({
            
    //Pass the data trought GET method.
            
    type"GET",
            
            
    //Prevent caching.
            
    cachefalse,
            
            
    //Get the progress from this php file.
            
    url"getprogress.php",                         
            
            
    //Pass our upload identifier as a parameter.
            
    data: {uidid},
            
            
    //Get the results.
            
    success: function (d) {

                
    //Get the output as an integer.
                
    var progress parseInt(d10);
                
                
    //If upload progress is not 100, change bar percentage and update again.
                
    if (progress != '100') {

                    
    //Update the progress bar percentage.
                    //But only if we have started.
                    
    $('#ProgressBar').css('width'progress '%');

                    
    //If we aren't done, update again.
                    
    getProgress(id);
                }
            },
            
            
    error: function(XMLHttpRequesttextStatuserrorThrown){
                
    alert(XMLHttpRequesttextStatuserrorThrown);
            }
        });



  • #3
    Regular Coder
    Join Date
    Mar 2009
    Posts
    116
    Thanks
    29
    Thanked 1 Time in 1 Post
    Turns out it's a bug, in any webkit based browser all ajax is essentially blocked until the file upload is complete. to bypass this you have to dynamically create an iframe and run the ajax requests from within it.

    You can find the bug report here: https://bugs.webkit.org/show_bug.cgi?id=23933


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •