> Hi,
> can anybody explain me, why this code don't work as I expected ?
> Here is:
>
> function get(page){
> return $.ajax({
> async: false,
> type: "GET",
> dataType: "json",
> url: "some_url.php?page=" + page
> }).responseText;
> };
>
> function show(data){
> data = eval(data);
> for(i=0;i<=data.length-1;i++){
> $("#results").append(data[i].url + "<br>");
> }
>
> }
>
> $("#search").click(function(){
> for(page=0;page<=9;page++){
> res = get(page);
> show(res);
> }
> return false;
> })
>
> In my opinion after click #search it should get portion of data,
> display it, get next portion of data and display etc.
> In FireFox3 everything is ok, it work fine as I expected, but in
> Safari and IE7.0 don't. In these browsers all results are displayed at
> once at the end of loop.
> Question is, why and how change this code to display portion of data
> after get it in Safari and IE7. Maybe bug ?
Since all this code is executing synchronously the browser does not
necessarily have a chance to render the changes immediately. IE and
Safari are probably accumulating repaint requests but do not satisfy
them until your loop finishes.
I don't think you will find anyone that will agree with the approach
you've taken. Making synchronous ajax requests is highly discouraged,
*especially* in a loop like you've done. I think you'll have much
better success with an approach more like this:
$("#search").click(function() {
getPages(1,9);
return false;
})
function getPages(idx, max) {
// make async request
$.ajax({
url: "some_url.php?page=" + idx,
dataType: 'json'
success: function(data) {
// process results
for(var i=0; i<=data.length-1; i++) {
$("#results").append(data[i].url + "<br>");
}
// get next page
if (idx < max)
getPages(idx+1, max);
}
});
}
