title: Load HTML within AJAX call
body: <p>I'm having some difficulty with a Javascript function I am writing. The basic function of the script is that when a specific AJAX function is called and returns successful, it loads some HTML from a file and inserts that HTML into a  on the main page and then (once loaded), fades in the parent div.</p>
  
  <pre><code>    jQuery.ajax({
      type: "POST",
      url: "fns/authenticate.php",
      data: dataString,
      success: function (data) {
          if (data=='1') {
              jQuery("#authlogin").fadeOut(500, function(){
                  $(this).remove();                   
                  jQuery("#result").load("fns/logic.html", function() {
                      jQuery('#authtrue').fadeIn(1000);
                  });
          });
          } else {
              jQuery('#details-error').fadeIn(200);
          }
      }
  });
  
  return false;
  </code></pre>
  
  <p>Now the AJAX seems to function properly, in that it will execute under the correct conditions and fade out and in the correct divs, the problem seems to be that the content isn't being loaded from logic.html or it is not being bound to the #result div correctly.</p>
  
  <p>The main page's html looks like:</p>
  
  <pre><code>&lt;div id="authlogin"&gt;
  &lt;!-- HTML form --&gt;
  &lt;/div&gt;
  
  &lt;div id="authtrue" style="display: none;"&gt;
  &lt;div id="result"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Any help would be much appreciated.</p>