Ajax Post Response

[MoFish]

Hi,

 

I have several processes which are fired on a single button click. I am trying to send feedback to the browser to let the user know which process is currently running - but am only getting feedback once they are all completed, instead of during ...

 

I wondered if anyone could help me in resolving why why the messages are only coming through once all events are fired and not during?

 

As an example I have the following...

 

A PHP page with one form and a button called designForm.

	<script>
	$('#designForm').submit(function(event) {
		event.preventDefault();
		$.ajax({
			type: 'POST',
			url: 'inc/design.process.php',
			data: $(this).serialize(),
			dataType: 'html',
			success: function (data) {
				$('#content').html(data);
			}
		});
	});
	</script>

This then fires the design-process.php page which has the following.

<?php

	function progress($message, $percent, $type){
			echo "<div class='alert-".$type."'>
			<p>$message</p>
				<div class='progress progress-striped active'>
				<div class='progress-bar'  role='progressbar' aria-valuenow='".$percent."' aria-valuemin='0' aria-valuemax='100' style='width: ".$percent."%'>
					<span class='sr-only'>".$percent."% Complete</span>
				</div>
			</div>
		</div>";
	}

	sleep(5);
	progress("First event firing...", "10", "warning"); 
	flush(); 

	sleep(5);
	progress("Second event firing...", "50", "warning");
	flush(); 

	sleep(5);
	progress("Third event firing...", "100", "warning");
	flush(); 

?>

All works well - apart from they all appear at once. I thought the flush command sent them directly to the browser but must have got lost somewhere.

 

Thank you,

 

MoFish

[mogosselin]

You are right when you say  "flush command sent them directly to the browser".

 

But this flushes the response "so far". It doesn't create a "new response" each time.

 

This piece of code:

			success: function (data) {
				$('#content').html(data);
			}

will be called only when the response is totally received. 

 

So even if you flush the response from time to time, the browser is still waiting for the response to be completely received before calling the "success: ..." piece of code.

 

So lets say that I would like to print the result of a long process, here's what I would do :

- Call a PHP script from Ajax that starts the long process

- the "long process" will write its progress in a text file (or in session, or a database).

- Then, each 2-3 seconds, an Ajax call to another piece of PHP code would get the actual progress from the text file and print it on the page.

- When the first Ajax call enters in it's "success:..." piece of code, it means that the process is done. So you can kill the 2-3 seconds timer and print "Done" on the page.

[MoFish]

Oh... that sounds a little more complicated that I had anticipated... Using your proposed technique would require 3 php files?  

 

I thought it was going to be a little easyier

[mogosselin]

Just 2 PHP files and one text file. One PHP file to start the process and write the progress to a text file. And another one just to read the "progress" file.

Not that difficult. You can do it!

[Ch0cu3r]

You could also do it on just one file, just send the action you want to perform in the query string, then use switch/case state to decide what to do

switch($_GET['action'])
{
    case 'start';
      // start the process
    break;

    case 'progress':
       // return progress of process
    break;
}

Edited February 16, 2014 by Ch0cu3r

[MoFish]

Hi,

 

Thanks, makes sense.

 

I'm still not not 100% sure if I should be making two ajax calls seperately or if there is an easy way to merge it into one ajax call using the different states avaliable.

 

Do I still require the flush?

 

POST.PHP

<?php 

	switch($_GET['action'])
	{
	    case 'start';
	    	// start progress
	    	sleep(5);
		$alert = "First event firing...";
		flush(); 
			
		sleep(5);
		$alert = "First event firing...";
		flush(); 
			
		sleep(5);
		$alert = "First event firing...";
		flush();
 
	    break;
	
	    case 'progress':
	    	// echo during progress
	       	echo $alert;
	    break;
	}

?>

FORM.PHP

		<div id="content"></div>

                <script>
		$('#designForm').submit(function(event) {

			event.preventDefault();

			$.ajax({
				type: 'POST',
				url: 'post.php?action=start',
				data: $(this).serialize(),
				dataType: 'html',
				success: function (data) {
					// the processing is done so can alert user its complete..?
				}
			});

			setInterval(function()
			{ 
			    $.ajax({
			      type:"POST",
			      url:"post.php?action=progress",
			      datatype:"html",
			      success:function(data)
			      {
                                  // echo the current status?
			    	  $('#content').html(data);
			      }
			    });
			}, 10000); // time to check

		});
		</script>

[MoFish]

I juggled some stuff around... I have managed to get my shorten my code in size and think I am on the correct lines with the ajax calls, but am still not getting the responses via the php.

 

It just returns "checking every second..." without the value of $alert

 

And completes in console at the end as expected.

<script>
/* set loading  variable */
var varLoading = true;

// fire the long process
$.post('post.php?action=start', function(data){
	// set loading to complete and send success message
	varLoading = false;
	console.log ("finished");
});

// call check status
checkStatus();    

function checkStatus() {
	// if we are still loading
	if(varLoading) {
		// check every second
		setTimeout(function(){
			// get the returned contents of page
			$.get('post.php?action=progress', function(data){
				// put them into the content div
				$('#content').html(data);
				// re-check status again
				checkStatus();
			})
		}, 1000);
	 }
}
</script>

<?php 
	$alert = "";
	
	switch($_GET['action'])
	{
	    case 'start';
	    	sleep(5);
	    	$alert = "first event";
		sleep(5);
		$alert = "second event";
		sleep(5);
		$alert = "third event";
	    break;
	
	    case 'progress':
	    	echo "checking every second ..." . $alert;
	    break;
	}

?>

[MoFish]

I seem to have it working, but am constantly closing and opening sessions .. surely this can't the the normal way to so it?   

<?php  session_start(); ?>

<?php 

	switch($_GET['action'])
	{
	    case 'start';
		    
		    $_SESSION['status'] = "Firing first event";
		    session_write_close(); 
		    session_start();
		    sleep(5);

			$_SESSION['status'] = "Firing second event";
			session_write_close();
			session_start();
			sleep(5);

			$_SESSION['status'] = "Firing third event";
			session_write_close();
			session_start();
			sleep(5);

			
			$_SESSION['status'] = "Complete";
			session_write_close();
			session_start();
			
	    break;
	
	    case 'progress':
	    	
	    	echo "" . $_SESSION['status'];
	    	
	    break;
	}

?>