How Can I Display A Progrss Bar When Php Is Running Using Ajax

[sagnik]

I want to display a progress bar when sending data to php and php inserts the data to database. Here is the code, I'm using:

step2_ajax.php:

<?php
$uid=$nm->getUserUID();
if(!empty($_SESSION['sessid'])){
	if($_POST['action'] == 'post_validate'){
		function makeProgress(){
			$progress=0;
			$max=100;
			$p=rand(0,10);
			for($i=$p;$i<=$max;$i++){
				if(isset($_SESSION['progress'])){
					session_start();
				}
				$progress++;
				$_SESSION['progress']=$progress;
				session_write_close();
				sleep(1);
			}
		}
		makeProgress();
		$fnt=preg_match('/^[a-zA-Z]*[a-zA-Z][a-zA-Z\.]*[a-zA-Z\.]$/i',$_POST['fname']);
		$lnt=preg_match('/^[a-zA-Z]*[a-zA-Z][a-zA-Z\.]*[a-zA-Z\.]$/i',$_POST['lname']);
		//$dt=preg_match('/^[0-9]*[0-9][0-9]*[0-9]$/i',$_POST['dob']);
		$dt=preg_match('/^([0-9]{2})-([0-9]{2})-([0-9]{4})$/',$_POST['dob']);
		$sa = array("Male","Female","Not Specified");
		$sex = in_array($_POST['sex'],$sa);
		$d1=$_POST['declaration1'];
		$d2=$_POST['declaration2'];
		$d3=$_POST['declaration3'];
		$uid=$nm->getUserUID();
		$usr=$nm->getUserField('username');
		$bc = get_browser(null,true);
		$ip = $_SERVER['REMOTE_ADDR'];
		$device = $bc['device_name'];
		$login_cookie = sha1($usr).'-'.sha1($ip).'-'.sha1($device);
		if($fnt && $lnt && $dt && $sex && $d1==1 && $d2==1 && $d3==1){
			if($_POST['sex']==$sa[0]){
				$dp=file_get_contents("{$global}images/avatars/man.png");
				$dp_mime="image/png";
			} elseif($_POST['sex']==$sa[1]){
				$dp=file_get_contents("{$global}images/avatars/woman.png");
				$dp_mime="image/png";
			} elseif($_POST['sex']==$sa[3]){
				$dp=file_get_contents("{$global}images/avatars/bisexual.png");
				$dp_mime="image/png";
			}
			$fn=db_real_escape_string($_POST['fname'],$con);
			$ln=db_real_escape_string($_POST['lname'],$con);
			$sex=db_real_escape_string($_POST['sex'],$con);
			$dob=db_real_escape_string($_POST['dob'],$con);
			$q0a=db_query("SELECT id,uid,login_cookie FROM users WHERE uid_md5='".sha1($uid)."' AND status='1'",$con);
			if($q0a && db_num_rows($q0a)==1){
				$r0a=db_fetch_array($q0a);
				$id=$r0a['id'];
				$s1a="INSERT INTO profiles_personal(`user_id`,`uid`,`dp`,`dp_mime`,`fname`,`lname`,`sex`,`dob`) VALUES('$id','$uid','$dp','$dp_mime','$fn','$ln','$sex','$dob')";
				$s1b="UPDATE users SET status='2' WHERE uid_md5='".sha1($uid)."'";
				$q1a=db_query($s1a,$con);
				$q1b=db_query($s1b,$con);
				if($q1a && $q1b){
					echo 'done';
				} else {
					echo 'failure: '.mysqli_error($q1a);
				}
			} else {
				echo "Sorry for the inconvenience... But maybe your account is suspended by Netmate team or you have already completed this step. Please check your account status <a href='/members/manage?do=check_status&sessid=".$_SESSION['sessid']."&refid=2'>here</a>";
			}
		} else {
			echo '\n\n Some of the informations you have provided might be invalid';
		}
	}	
} else {
	echo 'Your session was expired please login again';
}
?>

step2.form.php

<script>
$(document).ready(function(){
	$("#submit").click(function(e){
		e.preventDefault();
		getProgress();
		var f=$("#fn").val();
		var l=$("#ln").val();
		var s=$("input:radio:checked").val();
		var dd=$("#date").val();
		var dm=$("#month").val();
		var dy=$("#year").val();
		var a1=$("#a1").prop('checked');
		var a2=$("#a2").prop('checked');
		var a3=$("#a3").prop('checked');
		$(this).after("<span id='wait'></span>");
		var sub=$("#submit");
		var sw = $(this).next("span");
		sw.css({'left':'-4.3%','top':'12px','width':'100%'});
		sw.addClass('wait-icon-place');
		sub.val('');
		sub.attr('disabled',true);
		sw.show();
		if(f.length>=2 && f.length<=48 && l.length>=2 && l.length<=48 && (s=='Male' || s=='Female' || s=='Not Specified') && dd.length==2 && dm.length==2 && dy.length==4 && a1==true && a2==true && a3==true){
			var d=dd+'-'+dm+'-'+dy;
			var url="/includes/registration/step3_ajax.php";
			$.post(url,{sessid: '<?=$_SESSION['sessid'];?>', action: 'post_validate', fname: f, lname: l, sex: s, dob: d, declaration1: '1', declaration2: '1', declaration3: '1'}, function(d){
				if(d=='done'){
					sw.hide();
					sub.val('Next');
					sub.removeAttr('disabled');
					window.location.replace("/?sessid=<?=$_SESSION['sessid'];?>&refid=2");
				} else {
					sw.hide();
					sub.val('Next');
					sub.removeAttr('disabled');
					//alert("Something went wrong... Please try again!!! DEBUG: \n\n" + d);
					notify('warning',d,'topCenter',true,'relax');
				}
			});
		} else {
			$(this).next('span').hide();
			$(this).val('Next');
			$(this).removeAttr('disabled');
			notify('error',"Something went wrong!!! Please try again.\nDEBUG: "+d.length,'topCenter',true,'relax');
		}
	});
});
function getProgress(){
	console.log('getProgress');
	$.ajax({
		url: "<?=$public_ajax;?>async/get_progress.php",
		type: "GET",
		contentType: false,
		processData: false,
		async: false,
		success: function(data){
			$(".progress").css('width', data+'%');
			$(".progress").text(data+'%');
			if(data!=='100'){
				setTimeout('getProgress()',1000);
			}
		}
	});
}
</script>

I'm getting max execution time exceeds in step2_ajax.php because of the for loop. I want to display the progress as php inserts the data to mysql.

[Krydos]

max execution time exceeds

How long does this script run for?

[sagnik]

Well, I've set it for 10 seconds. And I don't want to delay the execution time. I want to display the progress bar as it takes how much time it normally takes.

[Krydos]

Javascript or just an animated gif would be a more reliable way to do an animated progess bar. Sometimes with php the browser doesn't even display the data until the entire page is downloaded.

[sagnik]

No, I want to show the progress, like, 1%, 5%, etc. while PHP inserts the data. I mean, show how much data was inserted/processed. Well, you can see that, I'm getting the contents of a file using "file_get_contents()", if I can show the progress of file_get_contents()", it will be also useful.