I'm trying something new and trying to run before I can crawl. I'm using a jQuery script in a test page that retrieves and displays events from a google calendar. The script works very well (because it was made by someone else!!)
I'm using the script to filter out events that only include a certain text, again all working and these are displayed inside a div.
I then want to display a different set of results with a different filter in another div and I simply thought I could just call the function again, however when I do this the results do not always end up in the correct div and sometimes get added to the same or previous box. Each refresh gets different results.
The results are correct so the feed is working so I assume it's something to do with document not being ready or perhaps delay in the feed?
Can anyone point me in the right direction please.
Code in page (feed anonymised):
jQuery(function ($) {
$.gCalReader({
feedUri: 'https://www.google.com/calendar/feeds/[email protected]/public/full',
maxresults: 4,
textfilter: 'ladies',
targetDiv:'#ladiesEvents'
});
$.gCalReader({
feedUri: 'https://www.google.com/calendar/feeds/[email protected]/public/full',
maxresults: 4,
textfilter: 'seniors',
targetDiv:'#seniorEvents'
});
$.gCalReader({
feedUri: 'https://www.google.com/calendar/feeds/[email protected]/public/full',
maxresults: 4,
textfilter: 'open',
targetDiv:'#openEvents'
});
$.gCalReader({
feedUri: 'https://www.google.com/calendar/feeds/[email protected]/public/full',
maxresults: 4,
textfilter: 'social',
targetDiv:'#socialEvents'
});
$.gCalReader({
feedUri: 'https://www.google.com/calendar/feeds/[email protected]/public/full',
maxresults: 4,
textfilter: 'junior',
targetDiv:'#juniorEvents'
});
});
And here's the function being called:
(function ($) {
//Add gcal element
$(document).ready(function () {
$('body').prepend('<div id="loading">Loading...</div>');
});
//Resize image on ready or resize
$.gCalReader = function (options) {
//Default settings
var settings = {
//defaults??
feedUri: 'https://www.google.com/calendar/feeds/[email protected]/public/full',
maxresults: 20,
displayCount: 1
};
var feedUri = options.feedUri;
if (feedUri.indexOf("public/full") == -1) {
feedUri = settings.feedUri;
}
var options = $.extend(settings, options);
//properties form options are combined with settings??
function _run() {
var calendarService = new google.gdata.calendar.CalendarService('GoogleInc-jsguide-1.0');
// The "public/full" feed is used to retrieve events from the named public calendar with full projection.
var query = new google.gdata.calendar.CalendarEventQuery(feedUri);
// Set the query with the query text
query.setFullTextQuery(options.textfilter);
query.setOrderBy('starttime');
query.setSortOrder('ascending');
query.setFutureEvents(true);
query.setSingleEvents(true);
query.setMaxResults(options.maxresults);
//alert(options.targetDiv);
var callback = function (result) {
var entries = result.feed.getEntries();
//clear the loading div
$('#loading').html('');
if (options.displayCount) {
$(options.targetDiv).append(entries.length + ' upcoming events');
}
$(options.targetDiv).append('<ul id="eventlist"></ul>');
for (var i = 0; i < entries.length; i++) {
var eventEntry = entries[i];
var eventTitle = eventEntry.getTitle().getText();
var startDateTime = null;
var eventDate = null;
var eventWhere = null;
var eventContent = eventEntry.getContent().getText();
var times = eventEntry.getTimes();
if (times.length > 0) {
startDateTime = times[0].getStartTime();
eventDate = startDateTime.getDate();
}
var d_names = new Array("Sun", "Mon", "Tues", "Wed", "Thurs", "Fri", "Sat");
var m_names = new Array("Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec");
var a_p = "";
var d = eventDate;
var curr_hour = d.getHours();
if (curr_hour < 12) {
a_p = "am";
}
else {
a_p = "pm";
}
if (curr_hour == 0) {
curr_hour = 12;
}
if (curr_hour > 12) {
curr_hour = curr_hour - 12;
}
var curr_min = d.getMinutes();
curr_min = curr_min + "";
if (curr_min.length == 1) {
curr_min = "0" + curr_min;
}
var time = curr_hour + ':' + curr_min + a_p;
var day = eventDate.getDay();
var month = eventDate.getMonth();
var date = eventDate.getDate();
var dayname = d_names[day];
var monthname = m_names[month];
var location = eventEntry.getLocations();
var eventWhere = location[0].getValueString();
var eventhtml = '<div id="eventtitle">' + eventTitle + '</div> When: ' + dayname + ' ' + monthname + ' ' + date + ', ' + time + '<br>Where: ' + eventWhere + '<br>' + eventContent;
$('#eventlist').append('<li>' + eventhtml + '</li>');
}
};
// Error handler to be invoked when getEventsFeed() produces an error
var handleError = function (error) {
$('#gcal').html('<pre>' + error + '</pre>');
};
// Submit the request using the calendar service object
calendarService.getEventsFeed(query, callback, handleError);
}
google.setOnLoadCallback(_run);
$(window).load(function () {
}); //End window load
};
})(jQuery);
Thanks
UPDATE: cos I can;t answer until another 7 hours... Ha ha!!!!
Found the problem - it was all down to the ID of the event list element.
Because there were now multiple instances of the element within the page I assume it was dumping the results in any that was available.
I've coded it to make the id of each event list unique and now it works
Eureka!!!
Found the problem - it was all down to the ID of the event list element.
Because there were now multiple instances of the element within the page I assume it was dumping the results in any that was available.
I've coded it to make the id of each event list unique and now it works