Question

$(document).ready(function(){
    $("#submit").click(function() {  

        var startDate = $("#startdate").val();
        var endDate = $("#enddate").val();
        var selected = $("#selected").val();

        $.ajax({
            type: "POST",
            url: "/json/chart",
            data: {
                selected:selected, 
                startDate:startDate, 
                endDate:endDate
            },
            success: function(data) {  

                $("#pkgLineDiv").empty().html("");                  

                $.each(data, function(index) {                         
                    $('#pkgLineDiv').prepend('<img id="'+ index+'" src="/public/images/ajax-loader.gif" /><br />');
                    $('#'+index).attr('src', 'chart/'+ data[index].pkgLineId +'/'+ data[index].wrapSpecId +'/'+ data[index].startDate +'/'+ data[index].endDate);                   
                });                           
            }

        });
        return false;           
    });
}); 

This is my code. I’m doing an ajax submit and getting some json data back. I’m then passing this data into a chart url. This chart url is a function that generates an image in the back end. The problem is this could be a long process. A simple ajax loading image doesn’t work because the ajax call is quick (gets a quick json array). It’s what happens after the ajax call that take a while. What I’m trying to do is get an image to show where the image will be. I can’t have a place holder because I don’t know how many images are going to be created.

This code will work in IE 8. The animation will not play but at least the image shows up where the final image will be. In Chrome and Firefox (my main testing environments) the image will not show at all. Is there something I am missing here? Thanks.

EDIT

:

      $("#pkgLineDiv").empty().html("");  //Empty all contents of the div to push new chart images       
                $.blockUI();
                $.each(data, function(index) {    

                    var chartUrl = 'chart/'+ data[index].pkgLineId +'/'+ data[index].wrapSpecId +'/'+ data[index].startDate +'/'+ data[index].endDate;  //Build chart URL
                    $('#pkgLineDiv').prepend(''+ data[index].description +'<div><img id="'+ index +'" src="/public/images/ajax-loader4.gif" /></div');


                    $.get(chartUrl, function() {                           
                        $('#'+index).attr('src', chartUrl);  

                        if (index == data.length - 1) {
                            $.unblockUI();   
                        }                       
                    });      
                });

Answer 1

I’ve not done this before so I can’t say for sure, but perhaps try to initially set the img srcs to the loader.gif then make ajax requests to each of the chart/’+ data… (i.e. the chart images) then on success set the src to the chart image. If the chart image’s headers indicate the client can cache that URL, then I believe it should work the way you want.

I believe the issue is how different browsers handle the changing of img src. If you don’t change the src until you know the image has been rendered by the server and cached by the client, you should be good.

Something like this:

$(document).ready(function(){

    $("#submit").click(function() {  

        var startDate = $("#startdate").val();
        var endDate = $("#enddate").val();
        var selected = $("#selected").val();

        $.ajax({
            type: "POST",
            url: "/json/chart",
            data: {
                selected:selected, 
                startDate:startDate, 
                endDate:endDate
            },
            success: function(data) {  

                $("#pkgLineDiv").empty().html("");                  

                $.each(data, function(index) {                         
                    $('#pkgLineDiv').prepend('<img id="'+ index+'" src="/public/images/ajax-loader.gif" /><br />');

                    var chartUrl = 'chart/'+ data[index].pkgLineId +'/'+ data[index].wrapSpecId +'/'+ data[index].startDate +'/'+ data[index].endDate;

                    $.get(chartUrl, function(data){ $('#'+index).attr('src', chartUrl); }); // get


                }); // each                           
            } // success

        }); // ajax
        return false;           
    }); // click
});  // ready