title: MSIE : jQuery's append()/html() not working, resorted to getElementById().innerHTML
body: <p>This is a long one,</p>
  
  <h2>The Premise</h2>
  
  <p>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).</p>
  
  <p>I jumped onto their lab servers to work on the dev website.</p>
  
  <h2>The Problem</h2>
  
  <p>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).</p>
  
  <pre><code>show_emploi = function(id, succ_id)
  {
      $('#emploi_details').fadeOut(800, function() {
          var $$ = $(this);
  
          $$.load('emploi_&lt;?php echo $data['lang']; ?&gt;.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();
      });
  }
  </code></pre>
  
  <h2>The Solution</h2>
  
  <p>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.</p>
  
  <pre><code>$.get('emploi_&lt;?php echo $data['lang']; ?&gt;.php', { job_details: 1, ajax: 1, id: id, succ: succ_id, random: (new Date().getTime()) }, function(data, status){
      $$.empty().append(data).show();
  });
  </code></pre>
  
  <p>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.</p>
  
  <h2>The Plot Twist</h2>
  
  <p>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 :</p>
  
  <pre><code>$.get('emploi_&lt;?php echo $data['lang']; ?&gt;.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();
  });
  </code></pre>
  
  <p>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.</p>
  
  <h2>The 'To Be Continued'</h2>
  
  <p>There is something in the function of embedding of the content that isn't clicking for all browsers (and clearly servers).</p>
  
  <p>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.</p>
  
  <p>Anyway, interesting mystery IMO.</p>
  
  <p>Hope someone out there in Stackland has the god-given answer.</p>
  
  <p>Thanks</p>