jQuery, html(), append() issue with IE

Question

Hello i'm having problem writing data (html, contains tables) returned from an ajax request to a div. The code works on Chrome, firefox..except IE (tested on IE 8) I use the following code:

function ajax_test(option) {
    $('.loading').fadeIn();
    $('.roto_messages').empty();
    $.get("options.php?i="+option, function(data) {
        $('.loading').hide();
        $('.container').append(data);
        $('.container').fadeIn(1000);
        addthis.toolbox('.addthis_toolbox');
    });
}

I tried using .html() too but it did not work on IE aswell. Thanks.

Answer 1

There are a few changes I'd start with. Cache your selectors when you create them initially and employ chaining. That results in something like this:

function ajax_test(option) {
  var 
    $loading = $('.loading'),
    $container = $('.container');

  $loading.fadeIn();
  $('.roto_messages').empty();

  $.get("options.php", {i: option}, function(data) {
      $loading.hide();
      $container
        .append(data)
        .fadeIn(1000);

      addthis.toolbox('.addthis_toolbox');
  });
}

The next question is, what is addthis? What does a utility like Firebug tell you when you run your ajax call?

Answer 2

It seems like a jQuery v1.4.2 bug, I tried the same code with jQuery 1.3.2 and it works fine in all browsers. Btw, Using jQuery v1.4.2, I get the following error in IE:

Message: 'null' is null or not an object
Line: 112
Char: 359
Code: 0
URI: http://www.mysite.com/jquery-1.4.2.min.js