July 17, 2012

jquery .load() not working onclick

Question by loriensleafs

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() {


and then tried to launch it using:


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 by Starx

First, your code has invalid structure

$(document).ready(function() {    
    function space_load() {
    space_load(); //Now call the function

However, you can trim it down do this

$(function() {

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

$(function() {
    $("#yourlinkid").click(function() {
           .html('<img src="preloader.gif" />')

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+


Please fill the form - I will response as fast as I can!