Question

I followed this thread. I now have:

<a href="#" onclick="$('#gc').load('test');">reload</a>... </span>
<div id="gc">
    empty
</div>

This is what I am getting:

Uncaught exception: TypeError: Cannot convert '$('#gc')' to object
Error thrown at line 1, column 0 in <anonymous function>(event):
    $('#gc').load('test');

What is that? I thought I would be able to select a div and replace the contents with load()?

Answer 1

Try attaching the event handler on domready:

HTML:

<a href="some-url" class="reload_link">reload</a>
...

JS:

(function($) {
  $(function() {
     $('.reload_link').click(function() {
        $(this).next('div').load(this.href);
        return false;
     });
  });
})(jQuery);

I like to wrap my jQuery code inside of an anonymous function using a $ argument to avoid name conflicts with other libraries. (Of course, I could just use jQuery.noConflict() as well)

The way this works is it retrieves all elements in the document that have a class of reload_link, then for each one, it retrieves the next <div> element and invokes load, passing in the current <a> element’s href attribute.