Menu
Hello,
First off, I’m just starting in Javascript ? Somebody showed me the jQuery (UI) stuff and I really want to use some of it’s functionality to provide users of my website with more feedback. The website is done in PHP and can be used to generate custom maps based on data made available by the Canadian government. I build the maps using 1000x1000px tiles so it can take several minutes for a large map. At the moment there is no feedback.
I’m now at the point I’m pretty sure it should work, but does something different from what I expect.
What I’m trying to do is update a jQuery Progressbar after the map creation process is started. First I kickoff the image generation:
[CODE] // Set a timer to run every 500 ms
console.log(“Setting run interval to 500ms”);
intervalID = setInterval(getProgress, 1000);
// Preload the
console.log(“The bigmap URL is ” + bigMapURL + “. Pre-loading image”);
setTimeout(function() {
$.ajax( {
url : bigMapURL,
timeout : 100
});
},150);
console.log(“Returned from image get”);
GetProgress calls a PHP script that report an INT with the current progress. There is some code to stop the Interval once it reaches 100%, but that is working OK:
[CODE]// Use an GET call to get the progress
$.get(“showProgress.php”, function(data) {
$(“#progressbar”).progressbar( {
value : parseInt(data)
});
console.log(“Received data: ” + data);
progress = parseInt(data);
});
The bigMapURL is a call to a PHP script that creates the large PNG file. So it will return a PNG image after maybe 2-3 mins if it’s very big. During the creation it updates a session variable that the showProgress.php file uses to report progress.
This all works fine with small images. The output in the console is:
[CODE]Setting run interval to 500ms
The bigmap URL is ./genmap_ng.php?resX=640&resY=480&lon_min=-124.58202151284&lon_max=-121.47069448716&lat_min=48.556308392779&lat_max=50.077455607221. Pre-loading image
Returned from image get
Received data: 100
Reached 100%, stopping interval runs
Received data: 100
This all makes sense, internval is set. Image request goes out in it’s own thread, that call returns. Internval triggers, progress s received and reported.
When I do a larger image, it quickly goes to the “Returned from Image get” but then sits there until the image has been created. Only then the console is flooded with all the Received data lines from the getProgress function.
As a result my progress bar only gets updated when the image is ready, not really what I had in mind ?
I’ve gone thru many different revisions (trying to load the PNG into a Image() and add that to page, simple jQuery .get and now the more complete ajax call) but I always get stuck at this exact same point.
Any suggestions on what the cause might be? The only other option I have is to rewrite the complete map creation process, and I won’t do that just to show a progress bar ?
Thank you very much in advance, I hope I explained the problem clearly..
Tx
Bas