How can I output multiple times during an ajax request to show accurate progress on server?

I want to display accurate progress status of what is happening on the server during my ajax request in real time. How can I do that?

The view rendering happens all at once when everything done. How can I render a view multiple times during a single request.

Also, is there a particular technical/web term for this?

Thank you.

Asked by pdesai, on 11/1/10

In general how long does the request actually take on the server?

joeb - on 11/1/10

<< comments | comments >>

2 Answers

dont think you can do that, but what you can do is download debug_kit from github and install firebug with firephp

that will give you alot of information about what is going on behind the scenes.

Answered by dogmatic69on 11/1/10

I need this one for the users, not for myself. My process does some maintenance operation on the server, and it could take a while depending on what all has to be done.

At this point, I have a progress bar image, which just says somethings happening. I want to throw back responses about what steps are being taken by the job.

Thanks for your response though.

pdesai - on 11/1/10

<< comments | comments >>

flush(); and ob_flush() work well to send out status messages to a long running process. There's a way to do this inline in a page and another way using iframes.

Basically if you load up page information into an iframe you can update that iframe as the page loads with status messages by flushing out messages to the output buffer. This will necessarily circumvent the natural cake rendering path but something like this would work for the code in our controller.


ob_start();
while(!$this->isDone()){

    echo '<div class="status-message">Still running...</div>';
    ob_flush();
    flush();
}
ob_end_flush();

Here's a link to php output buffer goodness

http://www.php.net/manual/en/ref.outcontrol.php

You can simply link this to the contents of the iframe and as it runs it will update the display with the divs.

Alternatively you can use AJAX and poll the AJAX call to see if there is any more data and if there is - render that output to the DOM. The downside is that this only works in FF, Safari and Opera so IE users only get all the output at the very end.

The following is in jquery but would be similar in any other framework-



<script type="text/javascript">
$(document).ready( function(){
    // Get the X-HTTP Request object	
    var xhr = $.ajax({
    	type: 'POST',
    	url: '/mycontrollers/ajaxfunction',
    	dataType: 'html',
    	success: function(msg){
    			
             alert('Success');
        }
    	
    }	
    );
    
    // set the onreadystatechange function to be our custom one
    xhr.onreadystatechange = xhrTest;
 
    function xhrTest(e){
    	
    	// Ready state keeps track of what ready state the ajax call is returning
    	var evt = e || window.event;
    	var rs = xhr.readyState || "None";

        // Everytime the page updates with more data FF and Safari will
        // fire onreadystatechange with the result status (rs) == 3
	// Stream for FF and Safari
    	if (rs == 3){
   		// take those messages and update our messages div
	    		$("#myMessages").html(this.responseText);
	    	}

    }
});
</script>

Here's a little on the xhttp object

http://www.tizag.com/ajaxTutorial/ajaxxmlhttprequest.php

Answered by davidwuon 12/1/10

<< previous next >>

Your Answer

You can use Creole Wiki Syntax to format your text.

Tagged with

Rating

0

Viewed

365 times

Last Activity

on 12/1/10