AJAX navigation in month view
anthrocreative - November 26, 2008 - 06:34
| Project: | Calendar |
| Version: | 6.x-2.x-dev |
| Component: | User interface |
| Category: | feature request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | needs work |
Description
Hello all,
Excuse what may be a simple question -- but has anyone succeeded in making the mini calendar's month navigation AJAX driven? Or any aspect of Calendar for that matter? I understand that the AJAX feature was removed in an earlier version in favor of Views' AJAX support. Is this working and I'm not doing something right? Broken? A problem with Views?
The "use AJAX" option doesn't seem to have any effect no matter which displays I turn it on for in the Calendar view. I'd appreciate any insights.
#1
I thought we already had an issue about this, but I can't find it, so we'll make this a feature request.
I'm hoping someone will dig into this and provide a patch.
#2
Thanks -- is this the issue you were thinking of? http://drupal.org/node/154479
I'm happy to look at patching it. I'm very capable with PHP in general, but being that I don't know drupal/views/calendar code very well yet it would be great if someone could give me some background. Is this something that needs to work correctly with Views 2's AJAX support, or does Calendar still need to handle its own AJAX stuff? Has anything been done to this end that would be useful in the patch, or are we starting from square one?
If nothing else, I'd be interested in what AJAX-related code was removed from Calendar in bug report #259127.
#3
You need to try to figure out what the Views ajax code is doing and use that. The previous patch used code that had nothing to do with Views so I doubt it's usable.
Also look at #339295: Minor fix to allow multiple ajax-paged views on a page since it's possible that may be an issue that will affect this, since we grab block and embedded view information from a querystring in the url.
#4
updated the version to the current one, as the issue still exists
I'm pretty sure the views module uses AJAX just for pagination, and this is a bit different from normal pagination. I can't think of a good way to make Views 2's ajax support work for calendar, at least not in its current form :(
Is there any chance that the new (2.x for D6) Calendar module can be updated to include its own ajax again? It seems like it would only require a theme update...
#5
Thanks -- I've been poking through Calendar and Views as time permits to put together a good way of accomplishing this. Unfortunately, I haven't been able to come up with anything yet. It may end up having to be hackish, or I'll request better support for AJAX in Views.
#6
Here's a small patch for starters. It works with the Calendar block display of the calendar view when you set Use AJAX to yes (override the default setting). It doesn't work with the page display but I'm sure it won't take much to fix that.
There's not much to it - the js include bit in theme.inc and a new js file which attaches a js method to the next and previous links in almost exactly the same way as a regular views pager which by some fluke seems to work. I've tested that it works independently of other AJAX views on the page including other calendar block displays.
I'll try to improve on what's here - but this patch should serve an immediate need.
Andy
#7
provided patch works for me and serves my immediate need :) Thanks
#8
subscribing
#9
The upcoming block has no pagination ajax or read more link .. am I the only person getting this?
#10
Patch from #6 works but as he said, calendar page view doesn't work
#11
This would be extremely useful. I don't know anything about Views AJAX but I was wondering if a better solution for this might be turning « prev next » into a pager? Because views already supports AJAX on pagers.
#12
I can't get this to work - question - all you need to configure (besides applying patch) is setting Ajax for JUST block to 'yes'? Or should I set it to yes on the 'date browser' attachment as well?
#13
seems patch from #6 doesn't work with the latest dev release of calendar module. patch applies but block is still "unajaxified"
:(
#14
ha! found the "bug" - patch creates the ajax_calendar_views.js in calendar module root directory and looks for the file in "js" subfolder...
great! hope this patch becomes comitted to cvs an gets "in" the module...
now only the monthly/weekly/... view needs to be "ajaxified" :)
thanks for the patch!
#15
Calendar AJAX views work great once the ajax_calendar_views.js file is in the js directory.
Tested with pages with daily, weekly and month views and months in blocks.
#16
#6 is broken for full page views at least. It will navigate one month, but navigation links are broken after that. Also the patch is rolled wrong -- relative paths aren't right
Planning on working on this today
#17
subscribe
#18
Any news on the patch? :)
#19
Doesn't look like it
#20
OK so maybe I didn't work on it the day I thought i was, but I did today:D
This patch is the same as previous patches plus a fix to jcalendar.js to use drupal behaviors. This allows it to re-apply on ajax updates.
The bummer is that this requires a date api patch to make it work. Here's the issue: #538300: Date Navigation preview should not trigger views "embed" URL
Both patches applied (against latest dev of calendar and date) and all works for me ... blocks pages, embeds (with some caveats on embeds)
#21
Oops, here's the patch.
#22
Thank you for the patch. I am, however, seeing 2 problems:
1) I have a mini calendar block displayed on my pages. Ajax generally works fine on it. BUT, when it's displayed on a page that is ITSELF a calendar view then using the mini-calendar's ajax controls results in unexpected behavior.
For example: consider a calendar view that displays events from a specific day (/calendar/2009-07-09). The mini calendar month block on that page initially renders just fine, but it seems as though the previous and next navigation javascript is being generated using the date being shown in the main portion of the page rather than the date for the mini-calendar block. The actual LINKS for previous and next are correct and if I turn off javascript then all works as expected, but if I allow the ajax behavior to occur then, instead of getting the previous or next month in my mini-calendar block, I instead get a header indicating the previous DAY (July 8, 2009) and no calendar content. The same thing happens if I attempt to use the mini calendar on a page that's showing a year view (/calendar/2009).
2) Even when the mini-calendar's ajax nav works there's an issue with the calendar's header link. It's supposed to link to whatever month you're viewing but instead it always links to the current month. The problem seems to be that the $view->date_info->url variable is populated incorrectly (seems to always pull from the default view arguments rather than the mini-view argument). I wouldn't be surprised if this argument conflict is what's causing #1 as well. EDIT: in fact, with a bit more investigation it appears that, in javascript, the wrong view_path is being ascribed to the ajaxView object for the mini calendar. The correct view_args are coming through, but the wrong view_path. It would seem that that is what needs fixing.
BTW: I'm rather new to Drupal so I apologize if I'm using incorrect terms anywhere here. Also, what do you mean by "embeds" when you say "Both patches applied (against latest dev of calendar and date) and all works for me ... blocks pages, embeds (with some caveats on embeds)"?
Many thanks.
#23
Yeap that's definitely broken. I don't have much time right now .. but could you help me by determining if the problem exists without ajax loading enabled?
#24
If I disable ajax then problem #1 is fixed but problem #2 still applies.
I can fix problem #2 fairly easily by making some alterations to the theme_date_nav_title function. $view->date_info->url is sent to that function with the url arguments *from the main calendar view* still intact but the function treats it as though it's coming WITHOUT any arguments, let alone the mini-cal arguments. But fixing it in theme_date_nav_title isn't going to be the solution; I'm looking further upstream to see where the $view->date_info->url is being populated as it would seem as though fixing it in the view object should probably fix it downstream when the javascript gets created. I'm assuming the basic problem is that the calendar view object is created and automatically pulls its arguments from the url if they're available regardless of whether or not it's a mini calendar. So we need to make the mini-calendar view ignore the regular calendar view url arguments somehow. I'm rather new to all this so it's slow going for me to figure this out and I'm not yet sure if it's the Date, Calendar, or View module that's the offending party.
#25
subscribe
#26
subscribing
#27
subscribing
#28
subscribing
#29
Here is a client side solution to ajaxify the "next/prev" links for all calendar views.
It is a work in progress but should work without any modifications to your code.
To use this code you can include it as a js file in your theme, or put it in the header of the default calendar view with full html input format.
<script type="text/javascript">$(document).ready(function() {
$.ajaxSetup ({cache: false});
// Display animated loading gif during the load event
var loading = "<center><img class='loading' src='/sites/dev/js/ajax-loader.gif' alt='loading...' /></center>";
function nextLoad(){
// Get the nextURL from the pagers next link
var nextUrl = $(".calendar-calendar .date-next a")[0].href;
// Identify the content/container you wish to replace
$(".view-calendar")
// Add the loading image
.html(loading)
.css({ opacity: 0 }).fadeTo("normal",1)
// Load the nextUrl + return the specific content by specifing the css class or id + bind the click function tp the newly loaded content
.load(nextUrl+ ".view-calendar .calendar-calendar", bindClick );
};
function prevLoad(){
var prevUrl = $(".calendar-calendar .date-prev a")[0].href;
$(".view-calendar")
.html(loading)
.css({ opacity: 0 }).fadeTo("normal",1)
.load(prevUrl+ ".view-calendar .calendar-calendar", bindClick );
};
function bindClick(){
$(".date-prev a").click(function(){
prevLoad();
return false;
});
$(".date-next a").click(function(){
nextLoad();
return false;
});
};
// Append the click function to the on the initial page load
bindClick();
});
</script>
Hope this helps, it's a short-term solution, but adds a powerful level of interaction, and doesn't break the calendar for users without javascript enabled.
Enjoy!
#30
Nice! Other than being a bit slow to load (but that's probably just my server), it works like a charm. Thanks for this!
#31
subscribe
#32
Nice script, just remember to change the jQuery selectors if you intend to use it on another view, and also upload the gif loader.
#33
subscribe
#34
According the the console:
XHR finished loading: "http://www.unca.org/home?mini=calendar-date%2F2009-10.view-calendar&_=1253893907709"
But, nothing happens. The view of the calendar stays exactly the same. Am I missing something?
#35
#36
This is still, overall, a feature request. Not a support request.
#37
I think that this is issue with classes. Check HTML and see what class is on calendar. On my setup I located that "views-calendar-date" is correct class instead of "views-calendar". Hope this helps.
#38
Subscribe
I'm not sure, but latest js script basically loads full new page but because of the script it looks like page haven't been reloaded?
#39
That's correct -- full new page is loaded in background.
#40
subscribing.