MSIE : jQuery's append()/html() not working, resorted to getElementById().innerHTML

Question

This is a long one,

The Premise

Was called in to help out a client with some bug fixing on a current project of theirs. What needed fixing was a jobs listing page. You have a list of jobs, you click one and if JavaScript is activated an AJAX call is made to dynamically load the job's details into an existing element (DIV#emploi_details). If JS isn't activated, it simply reloads the page with the job's details (less important).

I jumped onto their lab servers to work on the dev website.

The Problem

Basically, IE7 (at first) wasn't displaying the content loaded via $().load(). IE6 worked without a hitch with innerHTML. Requests are sent and I get a reply every time. I receive the data, I can alert() it and see it but the actual dumping of the content doesn't work. Safari, Firefox, no problems. The DIV#emploi_details element I'm loading info into has a CSS display:none; in its styleheets and is shown after content is loaded in (other not so important detail).

show_emploi = function(id, succ_id)
{
    $('#emploi_details').fadeOut(800, function() {
        var $$ = $(this);

        $$.load('emploi_<?php echo $data['lang']; ?>.php', { job_details: 1, ajax: 1, id: id, succ: succ_id, random: (new Date().getTime()) }, function(data, status){
            if (isIE6) document.getElementById('emploi_details').innerHTML = data;
            $$.show();
        });
        $('#bgContent').fadeOut();
    });
}

The Solution

At first I was under the impression maybe the $().load() was just acting up, so I changed it for a $.get() for more control over the manipulation of the loaded content.

$.get('emploi_<?php echo $data['lang']; ?>.php', { job_details: 1, ajax: 1, id: id, succ: succ_id, random: (new Date().getTime()) }, function(data, status){
    $$.empty().append(data).show();
});

This works. In all browsers including IE6 and IE7. No problem. Weird, but you know if it works and its fullproof, don't ask questions.

The Plot Twist

Now here's where shit gets weird. I considered the bug fixed and applied the solution to the live website and... it doesn't work. IE just isn't liking it. Baffled after trying $.ajax and all other sorts of stuff I end up using this for the live website :

$.get('emploi_<?php echo $data['lang']; ?>.php', { job_details: 1, ajax: 1, id: id, succ: succ_id, random: (new Date().getTime()) }, function(data, status){
    document.getElementById('emploi_details').innerHTML = data;
    $$.show();
});

And it works on all browsers, because there's nothing like barebones JS to get stuff done. Necessarily, this fix also works on the dev website.

The 'To Be Continued'

There is something in the function of embedding of the content that isn't clicking for all browsers (and clearly servers).

All in all, my question is a WTF question. I can't understand why one works on one side and the same doesn't work on the other side or even why it never worked properly in the beginning ($().load()). It's clearly not different jQuery versions (1.2.6) since it was my first instinct to verify the framework version.

Anyway, interesting mystery IMO.

Hope someone out there in Stackland has the god-given answer.

Thanks

Answer 1

I have solved the riddle! here is a working example of my problem. The trick was to call another AJAX after the first success, this will somehow override the problems with the innerHTML. Thanks guys for setting me to the right direction.

I hope this will help some people, because so far i haven't seen a working solution yet. I will also contact jQuery for this :P

$.ajax({
url:'modifyarticle.php',
type:'POST',
data:{
 id:this.id,
 article:'something',
 mode:'single',
 action:'delete'},
cache:false,
success:function(msg) {
 alert(msg);$.ajax({
  url:'getall.php',
  type:'GET',
  cache: false, 
  success: function(data) {
   $('#output').html(data);
  }
 });
}});

salut