PHP Streaming and jQuery - php

Question

What is the best way to display or deal with a large result on success while waiting for PHPto render that result. I would like to use jQuery to submit a form, have PHP process it, and give output/feedback to users while they wait (either in a div or an iframe...in the example below I use an iframe).
I have the backbone of the xhr version that I found online, but I was wondering if there is a better way (I am aware that there is jquery mixed into this:
function submitForm(){
$('#report_iframe').attr('src','/tests/stream_ajax/blank_iframe.php');
$("#report_modal").modal({backdrop: "static"});
count=1;
xhr = new XMLHttpRequest();
xhr.open("GET", "/folder/ajax_result.php", true);
xhr.onprogress = function(e) {
count = count +1;
$( "#report_iframe" ).contents().find( "#content_loader" ).text('this is jquery count' + count);
}
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
//console.log("Complete = " + xhr.responseText);
// alert("complete");
document.getElementById("report_iframe").srcdoc=xhr.responseText;
}
}
xhr.send();
};
Any help appreciated. Thanks.
J Doyle

Answer 1

Anyway you are using JQuery. Why don't you use JQuery ajax ?
$.ajax({
cache: false,
async: true,
type: "GET",
url: '/folder/ajax_result.php',
beforeSend:function()
{
count = count +1;
},
success:function(response)
{
document.getElementById("report_iframe").srcdoc=response;
}
});

Answer 2

I agree with #Nandan, you should use JQuery Ajax, now for the part of the progress feedback you should add an EventListener for the xhr object and display it in your frame, it would be something like this:
$.ajax({
xhr: function()
{
var xhr = new window.XMLHttpRequest();
//Download progress
xhr.addEventListener("progress", function(evt){
if (evt.lengthComputable) {
var count = evt.loaded / evt.total;
$("#content_loader").html('this is jquery count ' + count*100);
}
}, false);
return xhr;
},
type: 'GET',
url: "/folder/ajax_result.php",
data: {},
success: function(data){
//Do something
}
});
For a better explanation and more information:
Click here
Or here
UPDATE:
You could also try something like this, it works well for download progress
$.ajax({
type: 'GET',
url: "/folder/ajax_result.php",
data: {},
xhrFields: {
onprogress: function (e) {
if (e.lengthComputable) {
$("#content_loader").text("this is jquery count " + e.loaded / e.total * 100 + "%");
}
}
},
success: function(data){
//Do something
}
});