jQuery ajax load（）函数

Question

I don't know why the jquery ajax load function is not responding. When I click on the link that should force the div to load contents of .txt file nothing happens except I get the alert window that indicates the load function ran successfully. Here's the code:

mainTemplate.html

<div class="contentWrapper">
        <table>
            <thead>
                <tr>
                    <th>
                        Location
                    </th>
                    <th>
                        Account
                    </th>
                    <th>
                        Industry
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr id="Row1">
                    <td>
                        foo
                    </td>
                    <td>
                        foo
                    </td>
                    <td>
                        foo
                    </td>
                </tr>
                <tr id="Row2">
                    <td>
                        foo
                    </td>
                    <td>
                        foo
                    </td>
                    <td>
                        foo
                    </td>
                </tr>
                <tr id="Row3">
                    <td>
                        foo
                    </td>
                    <td>
                        foo
                    </td>
                    <td>
                        foo
                    </td>
                </tr>
                <tr id="Row4">
                    <td>
                        foo
                    </td>
                    <td>
                        foo
                    </td>
                    <td>
                        foo
                    </td>
                </tr>
            </tbody>
        </table>
        <!-- <button>Click Me</button> -->
</div>

The jQuery file:

$(document).ready(function () {

$("[id^=Row]").click(
    function () {
    $(".contentWrapper").load('foo.txt', function () { alert("Load was performed successfully")});
    }
);
});

foo.txt:

<h2>jQuery and AJAX is FUN!!!</h2>
<p id="p1">This is some text in a paragraph.</p>

I'm frustrated here. I'm using Google Chrome as my browser.

Answer 1

If you look closely at .load method documentation, you notice that its second parameter is a function of three parameters, which is called always when the request was "complete" which doesn't yet mean that it was successful. See examples at the bottom of this page to see how to get error information from the request object

Answer 2

It turns out I was using jQuery AJAX in the wrong way. I wasn't running the code on a server and so when I clicked on a link to run the jQuery load() function the xml http request didn't go through. Rookie mistake.

I ran the code on the server and fixed the file address issue. It works now!

Thanks for all the help everyone!