Load HTML within AJAX call

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 <div> on the main page and then (once loaded), fades in the parent div.

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;

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.

The main page's html looks like:

<div id="authlogin">
<!-- HTML form -->
</div>

<div id="authtrue" style="display: none;">
<div id="result"></div>
</div>

Any help would be much appreciated.

Solution

This is one of those things that you must troubleshoot yourself, because we do not have access to your fns/logic.html and therefore cannot test fully.

However, some thoughts:

(1) The basic logic of your .load() success function seems correct. Here is a jsFiddle that approximates the AJAX success function's logic. I substituted .html() for .load() because jsFiddle cannot do ajax. Anyway, assuming that .load() is doing what it should, that part should be working.

(2) You may already know this, but note that .load() is shorthand for $.ajax() -- as are .post() and .get(). You might find $.ajax() easier to troubleshoot as the code block is more structured. As a general rule, troubleshooting the shorthand constructions is slightly more abstract/difficult than troubleshooting $.ajax()

(3) Use developer tools in Chrome (press F12 key) to verify that the contents of logic.html have been inserted into the #result div. You might find, as I did in playing with my jsFiddle, that the contents were injected but the #authtrue div remained hidden. At least you will know that the logic.html document has been found and contents inserted. Knowing exactly where the problem is, finding/fixing the rest might now be trivial.

(4) Does your logic.html file include unnecessary header information? If so, you can strip it out by only inserting the BODY of the document, or a top-level containing div. See this section of the jQuery docs:

jQuery("#result").load("fns/logic.html #container", function() {//CALLBACK IN HERE});

(5) It would be a smart idea to create a test document that just and only loads the logic.html document, using various methods:

Method A: Using PHP (or whatever server-side language you use)

<div id="authlogin">
    <!-- HTML form -->
    <input type="button" id="mybutt" value="Click Me to Start" />
</div>
<div id="authtrue" style="display:none;">
    <div id="result"><?php include 'logic.html'; ?></div>
</div>

Method B: Using load()

HTML:

<div id="authlogin">
    <!-- HTML form -->
    <input type="button" id="mybutt" value="Click Me to Start" />
</div>
<div id="authtrue" style="display:none;">
    <div id="result"></div>
</div>

jQuery:

jQuery('#authtrue').show();
jQuery("#result").load("fns/logic.html");

(6) Ensure you do not have a typo in the destination element jquery selector: If no element is matched by the selector — in this case, if the document does not contain an element with id="result" — the Ajax request will not be sent. (from the docs)