Calendar tag and ajax/jquery

Question

Im using the calendar tag on a page and an iframe below it to display an event page. The iframe displays the latest event. When you click on a day in the calendar it calls that days event into the iframe.

Here is the code to call up the day event:

<a href="{day_path='events'}" target="cal_frame">{day_number}</a>

Here is the existing iframe:

<div class="colThree_event_container">
  <iframe name="cal_frame" scrolling="no" src="{site_url}events"></iframe>
</div>

I have been trying to do away with the iframe and have the same functionality using just a div and ajax/jquery with no luck.

Any pointers? :-)

Answer 1

Ok, here's the code:

Javascript:

$(function(){ 

    $('.ajax_link').on('click', function(e){ // catch the click, and bind that click-event to the variable "e"
        e.preventDefault(); // stop the event from firing (so user doesn't get forwarded to the actual link)

        var elem = $(this),
            link = elem.attr('href'),
            target = elem.attr('rel');

        $.get(link, function(data){ // do a GET-request
            $(target).html(data); // put the results in the target-element
        });

    });

});

I've made a Gist (which also includes the HTML): https://gist.github.com/4188501

Does that help?

Edit: updated code.