Search jQuery

jQuery Forum

Getting Started

settoloki

Help doing ajax requests in a loop

in Getting Started • 9 years ago

Hi, I am attempting to chain $.post ajax calls pulling the call from an array each time.

<script>
var reports = new Array();
var parts = <?=$n?>;
var rowsPerPart = <?=$items_per_call?>;
var url = "/ajax/report_show.php";
var data = <?=json_encode($report);?>;
var html = "";
for(i=0;i<parts;i++){
reports[i] = {
part : i,
end : i*rowsPerPart,
start : (this.end-rowsPerPart)+1,
fetch : function(callback){
$.post(url, {reportInfo:data, start:this.start, end:this.end}, function(data){
html = html+data;
alert("fetched part "+i);
this.callback = callback;
}, "html")
}
};
}
reports.forEach(function(report){
report.fetch(function(){
})
})
</script>

Where I am struggling is javascript is not my strongest language (thank scientists for jquery)

I have all the report parts in an array with a fetch method on each one that will grab the data, I would usually use the $.post call back to run the next ajax call when this one returns a success. Only the amount of times I want this to run is a variable dependant on other things (var parts = 12 so in my example it would run 12 times each time gettig the next bit of html from the ajax page, this is where the start and end variable comes in (around 5meg or more of data per part so it is timing out and causing an internal server error if I do it all at once)). The idea is to add a progress bar showing how it is doing at grabbing all the data, once it hits 100% I will display it (so after I have run the loop 12 times and retrieved the 12 parts (it won't always be 12 this is dependant on the size of the report))

I really not sure how to go about it, I come up with this code from examples I have found around the internet - but I have a feeling I am going around it the wrong way.

Thanks in advance

Replies(2)

kbwood.au

Re: Help doing ajax requests in a loop

9 years ago

Something like this:

<script>
var reports = [];
var parts = <?=$n?>;
var rowsPerPart = <?=$items_per_call?>;
var url = '/ajax/report_show.php';
var data = <?=json_encode($report);?>;
var html = '';
for (var i = 0; i < parts; i++) {
reports[i] = {
part : i,
end : i * rowsPerPart,
start : (this.end - rowsPerPart) + 1
};
}
fetch(0); // Start retrieval
function fetch(i) {
if (i < parts) {
$.post(url, {start: reports[i].start, end: reports[i].end}, function(data) {
html += data; // Process this response
alert('fetched part ' + i);
fetch(i + 1); // Fetch next one
}, 'html');
}
}
</script>

settoloki

Re: Help doing ajax requests in a loop

9 years ago

You sir are a saint.

What gets me is I knew how to do this and when I saw your example it was a d'oh! moment. so simple yet works wonders.

For anybody interested here is my completed code.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script>
var reports = [];
var datadisplay = new Array();
var parts = <?= $n ?>;
var rowsPerPart = <?= $items_per_call ?>;
var url = '/ajax/report_show.php';
var data = <?= json_encode($data); ?>;
var html = '';
var pval = 0;
for (var i = 0; i < parts; i++) {
reports[i] = {
part : i
};
}
fetch(0); // Start retrieval
console.group("Retrieving Form parts");
console.log("Retrieving parts process started.");
function fetch(i) {
pval = Math.ceil(100 / parts) * i;
if (i < parts) {
$.post(url, {data:data, part:i}, function(htmlp) {
//html = html + htmlp; // Process this response
datadisplay.push(htmlp);
$( "#progressbar" ).progressbar({
value: pval
});
$("#percentage").html("<strong>"+pval+"</strong>% Complete");
console.log("Fetching part "+i);
fetch(i + 1); // Fetch next one
}, 'html');
}
else if(i == parts)
{
console.log("Fetching part "+i);
fetch(i + 1);
}
else
{
//All reports loaded.
console.log("Retriving the report");
console.log("The report is ours");
$("#report-holder").html("Your report is ready, and will load shortly - please wait");
$.get('/<?=$folder;?>/<?=$file?>', function(contents){
$("#report-holder").html(contents);
$("#report-loading").hide();
});
}
console.log("Completed collecting reports.");
console.groupEnd();
}
</script>
<script type="text/javascript">
<!--
<?php if ($debug) { ?>
console.group("Report Log");
<?php
foreach ($log as $log_string) {
echo "console.log('" . addslashes($log_string) . "'); \r\n";
} ?>
console.groupEnd();
<?php
}
?>//-->
</script>

There is some php in this which should be easy to work out what it is for, unfortunately to post my php script as well would give more information than I am willing about my server and site :p and I do not have time to strip it

Basic gist is it runs mysql results on an ajax request limiting the amount of rows it pulls at a time, then the ajax script ties them all together and writes a file (between 70 and 200 meg) with a progress bar then display the file when done via way of a get request to the new.

It works rather well, It was bolted on to some old developers code so not everything is done in a way that I would like but it does work.

Thanks for your input kbwood.au without that input I would have been stuck for a lot longer on this.

Top Reply

Response title

Attachments

jQuery Forum

Help doing ajax requests in a loop

Replies(2)

Re: Help doing ajax requests in a loop

Re: Help doing ajax requests in a loop

Statistics

Tags

Actions