jquery .load() not working onclick

Question

I'm trying to have a site set up so when the page loads there is a div that dynamically pulls it's content from a .html page I have set up. I have a bunch of thumbnails at the top and when you click one I want the content from a different .html document to replace what every was in that div that was dynamically loaded into the first time.

To do this I'm trying to use the jquery .load() feature. What I tried to do was set up a function:

<script type="text/javascript"> 
$(document).ready(function space_load() {

$('#SPACE_TOTAL').load('http://www.klossal.com/portfolio/space.html');
}
</script>

and then tried to launch it using:

onclick="space_load();"

this didn't work and I was wondering if anyone could help me with this. The other thing I was wondering is if this were to work, would it replace the content that was previously loaded into there? I might be getting a head of myself and it just does this on it's own.

Answer 1

First, your code has invalid structure

$(document).ready(function() {    
    function space_load() {
        $('#SPACE_TOTAL').load('http://www.klossal.com/portfolio/space.html');
    }    
    space_load(); //Now call the function
});

However, you can trim it down do this

$(function() {
    $('#SPACE_TOTAL').load('http://www.klossal.com/portfolio/space.html');
});

But, since you want this on click of an element. This is what you need:

$(function() {
    $("#yourlinkid").click(function() {
        $('#SPACE_TOTAL')
           .html('<img src="preloader.gif" />')
           .load('http://www.klossal.com/portfolio/space.html');
    });
});