Многократное использование одной и той же функции jQuery
Я пытаюсь что-то новое и пытаюсь запустить, прежде чем я смогу ползти. Я использую скрипт jQuery на тестовой странице, который извлекает и отображает события из календаря Google. Сценарий работает очень хорошо (потому что он был сделан кем-то другим!!)
Я использую сценарий, чтобы отфильтровать события, которые включают в себя только определенный текст, снова все работает, и они отображаются внутри div,
Затем я хочу отобразить другой набор результатов с другим фильтром в другом div и я просто подумал, что мог бы просто вызвать функцию снова, однако, когда я делаю это, результаты не всегда оказываются в правильном div и иногда добавляются к тому же или предыдущему полю. Каждое обновление получает разные результаты.
Результаты верны, поэтому лента работает, поэтому я предполагаю, что это связано с тем, что документ не готов или, возможно, задержка в подаче?
Может кто-нибудь указать мне в правильном направлении, пожалуйста.
Код на странице (канал анонимный):
jQuery(function ($) {
$.gCalReader({
feedUri: 'https://www.google.com/calendar/feeds/abc@group.calendar.google.com/public/full',
maxresults: 4,
textfilter: 'ladies',
targetDiv:'#ladiesEvents'
});
$.gCalReader({
feedUri: 'https://www.google.com/calendar/feeds/abc@group.calendar.google.com/public/full',
maxresults: 4,
textfilter: 'seniors',
targetDiv:'#seniorEvents'
});
$.gCalReader({
feedUri: 'https://www.google.com/calendar/feeds/abc@group.calendar.google.com/public/full',
maxresults: 4,
textfilter: 'open',
targetDiv:'#openEvents'
});
$.gCalReader({
feedUri: 'https://www.google.com/calendar/feeds/abc@group.calendar.google.com/public/full',
maxresults: 4,
textfilter: 'social',
targetDiv:'#socialEvents'
});
$.gCalReader({
feedUri: 'https://www.google.com/calendar/feeds/abc@group.calendar.google.com/public/full',
maxresults: 4,
textfilter: 'junior',
targetDiv:'#juniorEvents'
});
});
И вот функция вызывается:
(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/abc@group.calendar.google.com/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);
Спасибо
ОБНОВЛЕНИЕ: потому что я не могу ответить до 7 часов... Ха-ха!!!!
Нашел проблему - все было вплоть до идентификатора элемента списка событий.
Поскольку теперь на странице было несколько экземпляров элемента, я предполагаю, что он выводил результаты в любой доступный элемент.
Я кодировал его, чтобы сделать идентификатор каждого списка событий уникальным, и теперь он работает
Эврика!!!
1 ответ
Нашел проблему - все было вплоть до идентификатора элемента списка событий.
Поскольку теперь на странице было несколько экземпляров элемента, я предполагаю, что он выводил результаты в любой доступный элемент.
Я кодировал его, чтобы сделать идентификатор каждого списка событий уникальным, и теперь он работает