[jQuery] update several divs within a .each() loop
Hi everybody!
I want to update the contents of several divs periodically with the
response i get from a php-script. the number of divs is changing
depending on what the user has chosen before. i store the variable
part of the ids in a hidden input field. this input field may look
like this:
<input type="hidden" name="devices" value="1,2,3,4,5,6,7">
to do this task periodically i use setIntervall():
<script type="text/javascript">
// dies stellt sicher, dass updateDivs() erst ausgeführt wird, wenn
die ganze seite geladen wurde
$(document).ready(function() {
updateDivs();
// wenn die seite komplett geladen ist, soll die progress-
bar verschwinden
$("#hide_me").hide();
});
setInterval("updateDivs()", 5000);
</script>
and the Code of the updateDivs() function:
<code>
function updateDivs()
{
$($("[name=devices]").val().split(","))
.each(function(){
var handler_url = 'devices_handler.php';
var devID = this;
var randomNumber = Math.random();
// DATEN-Abfrage mit ajax-queue
var monValues = $("#mon_" + devID).val();
var getValuesParams = {
"do":"1",
"de":devID,
"mo":monValues,
"rand":randomNumber
}
$.ajax({
type: "GET",
cache: false,
url: handler_url,
data: getValuesParams,
async: false,
success: function(response){
//alert(response);
$("#dev_" + devID).html(response);
}
});
});
}
</code>
Now the Problem:
The only browser who behaves as expected is Firefox 3.x - he flushes
the response after every ajax-request to the corresponding div ( .html
(response) ). All the other browsers are not updating the contents of
the divs until all the responses are available (although i execute the
request with async=false), and then they update all the divs (ids
dev_1 to dev_7) at the same time... but for me it would be necessary
that the other browsers behave like Firefox 3.
Does anyone have an idea? I would really appreciate it :-)
Thanks!
Daniel