2

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? :-)

  • Please post some of the options you have tried in making this work as you wish - detailed explanations and/or code samples, and why they didn't work. – Derek Hogue Nov 28 '12 at 13:24
4

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.

| improve this answer | |
  • Hi, Wouldn´t that still be targeting the iframe? target="cal_frame". It needs to target only the div: [div class="colThree_event_container"] [/div] – Kippi Nov 28 '12 at 13:13
  • No it wouldn't. The first thing we're doing after click is saying e (the click-event) .preventDefault(), so we're telling jQuery to stop it's default action (sort of like return false. – Steven Nov 28 '12 at 14:01
  • Ok, but I want to remove the iframe all together. I managed to do something like this: function ReplaceContentInContainer(id,content) { var container = document.getElementById(id); container.innerHTML = content; } And then: <a href="javascript:ReplaceContentInContainer('colThree_event_container','{day_path='events'}')"> but it is only showing the actual url in the div: mysite.com/events/2012/11/23 – Kippi Nov 28 '12 at 14:38
  • I'll make a gist in a bit showing how you could do this fully. Hang on! – Steven Nov 28 '12 at 16:54
  • Hey sorry, dropped the ball there. Here's the gist: gist.github.com/4188501 – Steven Dec 2 '12 at 12:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.