How to get IE6 to recognize inserted DOM elements via jQuery insertAfter()

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

For some reason, jQuery ajax() call silently fails when it cannot evaluate JSON (I have encountered this behavior several times), and the callback function isn't executed. Make sure IE6 can parse the JSON string your server returns.

Update To test this, try inserting these alerts at the line 3724 (jQuery 1.3.2)

if ( type == "json" ) {
    alert('a');
    data = window["eval"]("(" + data + ")");
    alert('b');
}

If my hypothesis is correct, you will see the 'a' alert but not the 'b' one.

Answer 2

shouldn't

$('#inserted_data_' + log_id).html('printout'); // problematic line

be

$('#inserted_data_' + log_id).html(printout); // problematic line

?

Answer 3

How long is your result set, because IE chokes on large data amounts ..
reference

Also make sure your json data does not have variable names that are identical to IDs in your html page..
reference

Answer 4

Couple of suggestions, as I can'T really replicate the situation they're just guesses but I would try to wrap the line $('#inserted_data_' + log_id).html(printout); into a $(document).ready(function() { $('#inserted_data_' + log_id).html(printout); });. I'm thinking that maybe the DOM is a non-ready state for a second until IE6 finishes adding the previous element.

If not I'd try to use a timeout on that line setTimeout(function() { $('#inserted_data_' + log_id).html(printout); },10); I know it's a little ugly but if it works you can add an if to do this only for IE6.

Also, instead of alert(printout); // sanity check check for alert(document.getElementById(inserted_data_'+log_id)); to make sure the element is already there with the right ID (maybe IE6 didn't insert the element with the right attributes, seen that problem with the name attribute quite a few time)

Answer 5

You could try this: http://code.google.com/p/ie7-js/ -- pretty funky

Answer 6

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