jQuery Progressbar


how can I implement the jQuery progressbar and update it in a loop during the form submit.

I am using Atk 4.3


Something like console can push real-time events:


You can add console as demonstrated, then set “display: none” on the console itself and use it to emit javascript events that push progress-bar forward.

That would be a quick and dirty solution, but you surely can build something more complete.

Awesome! I will try it out.

Hi, I get the following error …

Direct output (echo or print) detected on :0. Use $this->add(‘Text’) instead.

Am I doing something wrong?

code is as follows


    $c = $this->add('view_console');
    $pb = $this->add('Progressbar\View_Progressbar');

what you are trying to achieve is out of the scope of basic use, so you need to know how requests go back and fourth in detail.

when you submit the form, it sends request to the PHP and isSubmitted() part is executed. the form will expect a direct response which could be a redirect to a different page, for instance.

After the redirect, browser will try to load object on that second page, and you should place a progress-bar three. You need to keep your arguments along with it in a sticky state. Together with a progressbar you need to have a console. No forms on the second page. Once it’s loaded Console will create a “connection” to the PHP and will start streaming. Inside this console call-back you have to put your long-running-method that will periodically issue jsEval() with the updateProgress.

Hopefully this is helpful.

Thank you so much again for your quick response. This makes perfect sense and I was actually busy re-writing it in this way already last night.


At first I didn’t understand why you need progressbar at all. It looked like a “wizard” type of form which you want to create. But now I think I understood why - progressbar is important if you do some time-consuming stuff after form submit, right?

When you come to working solution it would be great if you could share that part of your code for others to learn how to make such stuff :slight_smile:


I have more or less followed your advice and put long performing action in new page. I just called page throug frameURL so it actually looks like it is part of current page.

$f->addSubmit('Upload to DB');
            $js = array();
            $js[] = $this->js()->univ()->frameURL('3G Uploader',$this->api->url('uploadData')));

In the new page

I call the time consuming process in Consoles call-back function

$pb = $this->add('Progressbar\View_Progressbar');
$done = $this->add('Button')->set('Done');
$done->js('click', $this->js()->univ()->closeDialog())->hide();
$c = $this->add('View_Console')->set(function($c) use ($done,$pb){
            $c->out('Loading Started');

This is clean enough for my requirements, thank you very much for the framework!