Question

I have a friend that wants to incrementally move data from one db to another and display errors while doing that. I felt I could help by writing a quick script for him and I completed it in about an hour and works fine in Opera and Firefox (testing with dragonfly and firebug). When he tried it in Chrome, the browser locked up until the for or while loop was done and it took considerable longer to complete. Here is my code (without the error catch part that reads the json):

jQuery.noConflict();
jQuery('#myForm').submit(function(form) {
    form.preventDefault();
    var increment = (jQuery("input#increment").val())*1;
    var total = jQuery("input#total").val();
    var progress = 0;
    jQuery("#progressbar").progressbar({value: 0});
    //for (progress = 0; progress < total; progress = progress + increment)
    while (progress < total)
    {
        jQuery.ajax({
            url: 'progressBarAjax.php',
            type: "POST",
            async: false,
            dataType: "json",
            data: {
                ajax: 'goAjax',
                total: total,
                increment: increment,
                progress: progress
            },
            success: function(data){
                jQuery("#progressbar").progressbar({value: data.value});
            }
        });
        progress = progress + increment;
    }
});

also, for further reference, the code for catching errors has been stripped during debugging and data.value = floor(($progress / $total) * 100). You can also see where I have tried both for and while and both work fine in Opera and Firefox but not Chrome.

Knowing why this behavior happens would be nice to know for future projects but also I would like to write it properly as well. The objectives are to take 200k inserts/updates and break them up in to smaller chunks, run the queries synchronously, and update a progress bar in the process.

Answer 1

Well, you’re using async:false so the browser will lock while the request is made. That while can also get into an infinite loop if increment is 0..

I would think you actually want query the server, and if the server comes back and says it’s not done yet in it’s json response, then query it again, until it says it is. Something like:

var increment, total, progress;

function getProgress(){
    jQuery.ajax({
        url: 'progressBarAjax.php',
        type: "POST",
        async: true,
        dataType: "json",
        data: {
            ajax: 'goAjax',
            total: total,           // Obviously, I don't know what these
            increment: increment,   // do on your server, so I've kept
            progress: progress      // them here.
        },
        success: function(data){
            // Assuming data.value is the progress from 1-100?
            // otherwise, figure out the progress from the data response
            progress = data.value;
            jQuery("#progressbar").progressbar({value: progress});
            if(progress < 100){
                getProgress();
            }else{
                // All done
                alert('done'); 
            }  
        }
    });
}

jQuery('#myForm').submit(function(form) {
    form.preventDefault();
    // Only go if we aren't currently.
    if(progress == null || progress == 100){
        increment = (jQuery("input#increment").val())*1;
        total = jQuery("input#total").val();
        progress = 0;
        getProgress();
    }
});