Thread

moved to external file but still not working.

This build was temporarily put on hold due but is now back on track.

Adam,
do you have any further suggestions. I’m going to get working on this this afternoon or tomorrow morning.

your help is truly appreciated and I understand if you don’t have the time at this point.

Sean,

I just so happened to have done this today so here is my snippet for you.

$(document).ready(function(){

   $(".calendarMonthLinks a").click(function () {    
      $('#calendar_holder').fadeOut("slow").load($(this).attr('href')+' #calendar' , function(){
    $(this).fadeIn("slow");
    });
      return false;
   })

});

John,

That’s fantastic. It works.

Just thought I’d say that the jquery function above will only work for one click. After that calendar month will reload the page you need to do this:

function calendarAjax () {
      $('.calendarMonthLinks a').live('click', function() {
        $('#calendar_holder').fadeOut().load($(this).attr('href')+' #calendar' , function(){
          $(this).fadeIn();
      });
          return false;
      });
    }

and call it with calendarAjax();

Hi,

Can you please give more details on how to callw ith calendarAjax();

Thanks,

You just need to call the function from within your jquery wrapper. You can leave the actual calendarAjax function inside or out.

$(function () {
    calendarAjax(); 
});

function calendarAjax () {
      $('.calendarMonthLinks a').live('click', function() {
        $('#calendar_holder').fadeOut().load($(this).attr('href')+' #calendar' , function(){
          $(this).fadeIn();
      });
          return false;
      });
    }

Hi,
Thanks for your reply on this.
I am kind of new to EE and really appreciate if you can read my code and see what I am doing wrong, because it is still not working and page refreshes:

Here is the code that I have in my template for the calendar:

<div id="calendar_holder">
<div id="calendar">
{exp:weblog:calendar switch="calendarToday|calendarCell" weblog="nswCalendar" show_future_entries="yes"}

<table class="calendarBG" border="0" cellpadding="3" cellspacing="1" summary="NSW Calendar">
<tr>
<th class="calendarHeader"><div class="calendarMonthLinks"><a href="http://{previous_path=nsw/}class=calendarMonthLinks"><<</a></div></th>
<th class="calendarHeader" colspan="5">{date format="%F %Y"}</th>
<th class="calendarHeader"><div class="calendarMonthLinks"><a href="http://{next_path=nsw/}class=calendarMonthLinks">>></a></div></th>
</tr>
<tr>
{calendar_heading}
<td class="calendarDayHeading">{lang:weekday_abrev}</td>
{/calendar_heading}
</tr>
{calendar_rows }
{row_start}<tr>{/row_start}
{if entries}<td class='{switch}' align='center'><a href="http://{day_path=nsw/}">{day_number}</a></td>{/if}
{if not_entries}<td class='{switch}' align='center'>{day_number}</td>{/if}
{if blank}<td class='calendarBlank'> </td>{/if}
{row_end}</tr>{/row_end}
{/calendar_rows}
</table>
{/exp:weblog:calendar}
</div>
</div>

Here is my Ajax code that I have in the deader of the main page:

<scr**pt type="text/javascript">

$(function () {
    calendarAjax(); 
});

function calendarAjax () {
      $('.calendarMonthLinks a').live('click', function() {
        $('#calendar_holder').fadeOut().load($(this).attr('href')+' #calendar' , function(){
          $(this).fadeIn();
      });
          return false;
      });
    } 
[/sc**ript]

and this is how I am embeding the template into the main page:

{embed="nsw/calendar"}

Thanks heaps for your help, I really appreciate it.

Cheers,
Ramtin

Hey,

Try removing the .calendarMonthLinks class from your link. As it may be getting confused as you have it on both the div and the a.

Also make sure your next_path and previous_path are actually pointing to a calendar. As the Ajax loads it from there.

Also if all the fails, try stick your calendar Ajax function in the jquery wrapper (Don’t think this will have any effect, but worth a try).

Hope that helps,
Brendan

Hi Brenden,

Thanks heaps for helping me with this.

I tried to point the _path to the actual calendar and I removed the <div>‘s around them which were holding a class as follow:

Can you please see if my _path is correct, now when I click on the arrows the calendar template which is only a calendar loads on the page. I have the calendar template sitting in a group template called “NSW” and it is called “calendar”. Also as you know I am embeding this into the index page as a small calendar.

<tr>
<th class="calendarHeader"><a href="http://{previous_path=nsw/calendar}class=calendarMonthLinks"><<</a></th>
<th class="calendarHeader" colspan="5">{date format="%F %Y"}</th>
<th class="calendarHeader"><a href="http://{next_path=nsw/calendar}class=calendarMonthLinks">>></a></th>
</tr>
<tr>

I did not touch the JQuery.

Now when I load the page I get an error message which indicates “object expected nsw/”

My other concern is previously the page was loading with the new month on the calendar, however weblog entried used to disappear from the page and the only things that I could see were, calendar and the menu that I had embeded and the new url was: http://www.domain.com.au/index.php/nsw/2010/02

I really appreciate your time that you are putting in this. But I am kind of lost as I have tried whatever I could.

Thank you again and I look forward to hearing from you.

Cheers,
Ramtin

Hi,
In your jquery it’s looking for a class of .calendarMonthLinks (which is on the div in your old version) and the within it it looks for a link. And once that is clicked it fires the ajax function. This pulls the info from your site. That URL you posted doesn’t seem to be working. If http://www.yoursite.com/nsw/calendar shows your calendar then you are pointing it to the right place. Check your dynamic parameter as well.

Below is a calendar I had working.

{exp:weblog:calendar switch="calendarToday|calendarCell" weblog="nswCalendar" show_future_entries="yes" show_expired="yes" dynamic="on"}    
        <table border="0" cellpadding="0" cellspacing="0" summary="This Months Calendar">
            <caption>
            <div class="calendarMonthLinks"><a href="http://{previous_path=%27nsw/calendar%27}" title="previous month">«</a></div>  {date format="%F %Y"}  
            <div class="calendarMonthLinks"><a href="http://{previous_path=%27nsw/calendar%27}" title="next month">»</a></div>
            </caption>
            <tr>
            {calendar_heading}
              <th scope="col" abbr="{lang:weekday_long}" title="{lang:weekday_long}">{lang:weekday_abrev}</th>
             {/calendar_heading}
            </tr>
            {calendar_rows }
            {row_start}<tr>{/row_start}
              {if entries}
              <td class="{switch}" align="center"><a href="http://{day_path=previous_path=%27nsw/calendar%27}" title="{title}" class="tip">{day_number}</a></td>
              {/if}
              {if not_entries}
              <td class="{switch}" align="center">{day_number}</td>
              {/if}
              {if blank}
              <td class="blank"> </td>
              {/if}
              {row_end}
              </tr>
            {/row_end}
            {/calendar_rows}
          </table>
        {/exp:weblog:calendar}

If all else fails look at the javascript and html on the site of one of the repliers above (using firebug or something like that). My site is not live so can’t give you a link.

Hope that helps,
Brendan

Hi Brenden,

I changed the calendar code to match yours.

Now when I run the page it will give an error that “object expected” which is “nsw/”

The error goes back to these lines

$(function () {
    calendarAjax(); 
});

Do I need to seperate this bit and insert it somewhere else? Because at the moment I have all the jQuery block under one script tag in the head of the index and not the calendar template.

Do I need to have all the standard html tags in the calendar template like head, html, body or I need to have only the div tags which display the calendar?

Now when I click on the next and previous links the calendar template loads in a blank page with only calendar on it.

I am going crazy as I also went through the sample sites using firebug and extracted the code, but still doesnt work.

Is this related to next and previous path?

What am I missing really?

I really appreciate if you can give anothe hint, maybe this time it will work.

Cheers,
Ramtin

Hi Ramtin

You should have something like this is in your head Wherever the calendars are being called from

[removed][removed]

$(function () {

    calendarAjax(); 
    function calendarAjax () {
      $('.calendarMonthLinks a').live('click', function() {
        $('#calendar_holder').fadeOut().load($(this).attr('href')+' #calendar' , function(){
          $(this).fadeIn();
      });
          return false;
      });
    }

});

You may wanna try a different method of initialising jquery. Maybe you are having a conflict - There are a couple of options like jQuery(document).ready(function(){//Code in here}); - there are a couple of different ways. If you are using any other javascript frameworks they may be conflicting as well (but doesn’t sound like you are). I stuck both the function and the call within the wrapper for ease sake.

Yup, you need all the standard tags etc. Generally when you click the next_path and previous_path buttons it points to a calendar month like this - http://www.domain.com/nsw/calendar/2010/02 if you put that URL make sure that works and that is where you are pointing the calendar navigation.

Hi Brenden,

Just to clarify three things:

1- I need to have all the standard tags on the clanedar template as well. Although I am having all these on the homepage. (doesn’t this double up the html tags?)

2- JQuery needs to be added to the calendar template and NOT the homepage.

3- do you mean that the caller needs to be in a seperate wrapper in homepage?

Thanks,
Ramtin

Hi Ramtin,
The jquery doesn’t load the whole page it just looks for the calendar div on the calendar page (or whatever one you are pointing to) and loads that. So if someone doesn’t have javascript you want the place the link is pointing to to actually point to a page that fits in with your site.

The jquery should be wherever you want the calendar loaded via ajax. So if you want that to be the homepage then it should be there. If you’re gonna load jquery on the homepage you may as well have it set on all pages. As it won’t be loaded again (not real performance hit)

Brendan