Question

I have the following code, which is supposed to open a modal dialog with a progress bar. The progress bar should advance as ajax calls go one in the background. The problem is, the dialog box is not opening until after the for loop is complete, all the ajax calls are done. I think I am supposed to the .promose() function somehow, but I am not sure how to implement it in this case. Can someone help me?

jQuery('#div_id')
    .button()
    .click(function(){
        var grid = jQuery('#grid_id');
        var sel_ar = grid.jqGrid('getGridParam', 'selarrrow');
        var last_id = 0;

        //open modal progress bar to display the progress of the emails
        jQuery('#dialog').html('<div id="progressbar"></div>');
        jQuery('#dialog').dialog({
            modal: true
        });
        jQuery('#dialog').dialog('open');

        for (var i = 0;i < sel_ar.length;i++){
            var orderid = jQuery('#grid_id').jqGrid('getCell', sel_ar[i], 'order_id');

            if (last_id != orderid){
                jQuery.ajax({
                    async: false,
                    url: "/scripts/ajax/script.php",
                    type: "post",
                    data: "orderid="+orderid,
                    success: function(data){
                        if (data != "true"){
                            alert(data);
                        }
                        jQuery('#progressbar').progressbar({ value: Math.round((i/sel_ar.length)*100) });
                    }
                });
            }
            last_id = orderid;
            pausecomp(1000);
        }
        //jQuery('#dialog').dialog('close');
        jQuery("#keys_list").trigger("reloadGrid");
        jQuery("#purchased_users").trigger("reloadGrid");
    });

The pausecomp() is a function that just pauses for a certain number of milliseconds. I was trying to put this in to make sure it was taking some time to complete the for loop, so I could see the progress bar ticking… Unfortunately it just extended the time i had to wait to see the progress bar pop up after everything was all done.

I have made a fiddle that illustrates the problem. Notice how it waits until the end of the for loop to update the progress bar. http://jsfiddle.net/YxGqG/5/

Thanks!

Answer 1

You need to remove the async false. it’s going to lock up your browser and if the dialog hasn’t been displayed, it won’t display until after the ajax request. Additionally, the async:false is going to cause the updates to the progress bar to be clunky.

Delete the line “async:false” you will then need to fix the state issue with updates to the progress bar, after you fix that issue this will work how you want it to.

Also, that lag you are seeing in the updates to the progress bar is due to using async:false. The UI thread of the browser is in a race condition with your javascript, and when you hit the ajax call with async false, everything stops, including the “in-process” ui update to change the display of the progress bar. That’s a high level.

UPDATE
here you go: http://jsfiddle.net/xe8wF/2/ (fixed the bug that caused it to stop at 99%)