Question

I have a page with a hyperlink that when clicked, I want it to load the content from another file so the page doesn’t have to refresh. The contents of the current “.container” should be replaced with the contents of “.container” from an external html file.

Here is my html

 <li> <a href="#" class="loader" id="indexLink">Chris Lebeau</a>

Here is my jQuery at the bottom of the page.

  <script type="text/javascript">
     jQuery(document).ready(function() {
     jQuery("#indexLink").click(function(event) {
     jQuery("div.container").html(ajax_load).load("index.html");
    event.preventDefault();
});

});

When you click the first guy in the ORG chart @ http://frommesetc.com/test/org.html that .container should fade out, and the .container from index.html should fade in.

Answer 1

You have a couple of issues here.

Firstly you have no element with the class ‘container’ – therefore your click handler is actually doing nothing.

Also, if you have a listener for the click then there is no need to link to the JS function from a anchor.

Here is an example:

HTML:
<a class="button" href="#">Hello</a>
<div class="newcontent"></div>

JAVASCRIPT:
var loadingAnim = "<img src='img/ajax-loader.gif' alt='loading...' />";
var dataToLoad = "/index.html";
$("a.button").click(function(){
    $("div.newcontent")
        .html(loadingAnim)
        .load(dataToLoad);
});