Print Page - Dynamic Progressbar With Ajax

Title: Dynamic Progressbar With Ajax
Post by: anugrast on May 01, 2015, 06:55:50 PM

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

Title: Re: Dynamic Progressbar With Ajax
Post by: stworthy on May 02, 2015, 05:37:11 AM

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

Code:

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

Title: Re: Dynamic Progressbar With Ajax
Post by: anugrast on May 02, 2015, 08:24:33 PM

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....

Title: Re: Dynamic Progressbar With Ajax
Post by: stworthy on May 03, 2015, 05:43:14 PM

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);
}

Title: Re: Dynamic Progressbar With Ajax
Post by: anugrast on May 03, 2015, 07:01:09 PM

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...

Title: Re: Dynamic Progressbar With Ajax
Post by: anugrast on May 05, 2015, 08:46:50 PM

Anyone help... please...

Title: Re: Dynamic Progressbar With Ajax
Post by: lloyd on January 28, 2016, 05:21:31 AM

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. :)

EasyUI Forum

General Category => General Discussion => Topic started by: anugrast on May 01, 2015, 06:55:50 PM