Question

I’ve got a jquery ajax function that polls the database server to see if there are new records. If so, it inserts the new records (with unique IDs) at the top of the record list using the following:

$(new_records).insertAfter('#div_at_top_of_page');

This works fine, even in IE6.

However, each inserted record has a secondary ajax function to grab more details about that record and insert it into an element inside the inserted element.

This works fine in every browser except IE6. IE6 executes the secondary ajax function (I’ve confirmed this), but doesn’t then insert the content. It fails silently, without throwing any errors.

I’m assuming this is because IE6 doesn’t see the inserted elements in the DOM; but in any case, I’d be grateful for any ideas on how to resolve this.

Edit 2 – the code I added in my first edit, below, seems to be working fine. The problem is that IE6 doesn’t know that $('#inserted_data_' + log_id) exists. This is the element that was inserted using the .insertAfter() method above.

Edit – the code used to insert the secondary data:

$('.printout').live('click', function(ev) {
    ev.preventDefault();
    var ajaxUrl = $(this).attr('href');
    $.ajax({
        url: ajaxUrl,
        cache: true,
        dataType: 'json',
        success: function(j, textStatus) {
            var printout = j.printout;
            alert(printout); // sanity check
            var log_id = ajaxUrl.replace('/api/fetch_data/printout/', '');
            $('#inserted_data_' + log_id).html(printout); // problematic line
        }
    });
    return false;  
});

As I noted, this function executes properly, as confirmed by the // sanity check, but the line noted above with the comment // problematic line does not actually write the data into the '#inserted_data_' + log_id element.

Answer 1

I bet the problem is your log_id variable. I would guess your replace is not behaving as expected. Put a couple more sanity checks in there and let me know if they point you in the right direction…

var log_id = ajaxUrl.replace('/api/fetch_data/printout/', ''); 
alert(log_id);  // Show the log_id variable

var el = $('#inserted_data_' + log_id);
alert("Element found: " + (el.length > 0)); // Did it find the element?

el.html(printout); // problematic line