Help updating two divs at the same time from long running PHP script
Hi people - fairly new to Ajax and JQuery, hoping someone can help here.
I have a page which displays a "process monitor" div, loading its content in a continuous loop (until the process finishes) from a PHP / MySQL script. This works a treat.
There is a button on the page which does three things (1) use .get to fetch the next process id from the MySQL database, (2) starts the process monitor refreshing itself to watch for updates in MySQL (using process_id value), and (2) starts the long-running PHP script (passing process id value) which takes about 30 seconds, and updates the MySQL database with the progress of the script.
Problem is that when the process is launched (consignment_create()), the contents of the process monitor div are not loaded until the long running process is completed.
I know I am missing a trick here as the whole point of AJAX is to be asynchronous.
How do I get:
$.get('ajax/test_process.php?process_id=' + process_id);
and
process_log_start(process_id);
to update independently, so that my process monitor refreshes itself in a loop, and at the same time my long running process executes. Debugging shows they both launch at the same time, but the browser does't update the process monitor until the process has finished.
My full code is below, but for clarity, I think this could be recreated by having two divs, both populated by .get() from a PHP script which looks like this:
$counter = 0;
while $counter <10
{
$counter++;
//do something
sleep(1);
}
function consignment_create() { $('#status_bar').html("Creating consignments..."); //get next process_id from php $.get('ajax/create_process.php', function(process_id) { $.get('ajax/test_process.php?process_id=' + process_id); process_log_start(process_id); } ); //process_log(); } /////////////////////////// function process_log_start(process_id){ var ajaxRequest; try{ ajaxRequest = new XMLHttpRequest(); } catch (e){ try{ ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try{ ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e){ alert("Your browser is too old for AJAX!"); return false; } } } ajaxRequest.onreadystatechange = function(){ if(ajaxRequest.readyState == 4){ document.getElementById('process_log').innerHTML = ajaxRequest.responseText; if (document.getElementById('stop_field') == undefined) process_log_refresh(process_id); } } var queryString = "?process_id=" + process_id; ajaxRequest.open("GET", "ajax/test_process_results.php" + queryString, true); ajaxRequest.send(null); } function process_log_refresh(process_id){ var t=setTimeout("process_log_start(" + process_id + ")",100); }