Dynamic Progressbar With Ajax

[anugrast]

I want to create dynamic progressbar to show real progress when I process some data with ajax... Can anyone help me... Please....

[stworthy]

When you retrieve the progress value, you can call 'setValue' method to display the real progress.

Code:

var value = ...
$('#pb').progressbar('setValue', value);

[anugrast]

This is my code...

HTML & JS:

Code:

    <div style="margin:20px 0;">
        <a href="#" class="easyui-linkbutton" onclick="start()">Start</a>
    </div>
    <div id="pb" class="easyui-progressbar" style="width:400px;"></div>

    <script>
			function start(){
				$.ajax({
					async:true,
					type:"POST",
					url: '_modul/mod_bengkel/aksi_bengkel.php',
					success: function(result) {
						var hasil=parseInt(result)+0;
						var value = $('#pb').progressbar('getValue');
						if(value < 100) {
							value += hasil * 10;
							$('#pb').progressbar('setValue', value);
						}
					}
				});
			};
    </script>

And this is my PHP file

Code:

for ($x = 1; $x <= 100; $x++) {
	if($x>1) sleep(2);
	echo $x;
} 

When I click start, it's nothing happen...

I need your advise how to fix it....
Please....

[stworthy]

Your PHP code takes a long time(99*2 seconds) to response to the browser, please correct it.

Code:

for ($x = 1; $x <= 100; $x++) {
	if($x>1) sleep(2);
	echo $x;
	exit(0);
} 

[anugrast]

Thanks for your respond...

Why in my progressbar only show 1 step (I mean only show 1% and stack...), there is something else that I should put on my script...

[anugrast]

Anyone help... please...

[lloyd]

You should create an event message handler.

See: http://www.w3schools.com/HTML/html5_serversentevents.asp example.

I have used it in my code when I export data to a csv file.