Symfony Ajax Progress Bar

ajax, css, jquery, php, symfony

Solution

You have to use session-write-close() in your long php action.

JS :

var isInProgress = false;
function veryLongImport()
{
     isInProgress = true;
     checkfx();
     $.ajax({
            type: "GET",
            url: /myverylongueactionPath ,
            async : true,
            cache: false,
            dataType:'html',
            success: function(data){},
            error: function(){  },
            complete: function(){
                isInProgress = false;
            }
        });
}

function checkfx()
{
    if( isInProgress != false )
    {
        $.ajax({
            type: "GET",
            url: /mycheckpath ,
            async : true,
            cache: false,
            dataType:'html',
            success: function(data){
                 makeYourProgressBarGrowHere();
             },
            error: function(){  },
            complete: function(){
                checkfx();
            }
        });
    } else { }
}

PHP Controller:

public function myVeryLongAction($id)
{
   session_write_close();
   ... code ...
}

public function myCheckAction()
{
    ...code...
}

Problem

I have an ajax controller that iterate over a loop. I would like to update a progress bar following this controller progress. Basically, I just have to output a `$('.bar').css('width', $percent . '%')`. But all those outputs are just accumulated and sent once the function is finished. How can I update the bar after each output ? I have already tried `flush()` and `ob_flush()`. Does Symfony uses other buffers ? EDIT: Part of the controller that ouput javascript ``` $total = count($results); foreach ($results as $result) { $count++; echo '<script>$(\'.bar\').css(\'width\', \'' . (int)($count / $total * 100) . '%\');</script>'; } ```

Original source