Just for fun, here is the code to create the course filter on the My Courses page. Copy and paste it into your global JavaScript file:
/////// Course List Filter ////////
if ($('#my_courses_table').length > 0) {
var kl_course_filter = '<div id="kl_course_filter_wrapper"><label for="kl_course_filter">Filter by Term:</label> <select id="kl_course_filter"><option value="all">View All</option>',
kl_course_terms = [],
txt;
// Loop through all of the courses and build a list of terms
$('td.course-list-term-column').each(function () {
// Grab the text
txt = $(this).text();
// Add if not already in the array
if ($.inArray(txt, kl_course_terms) === -1 ) {
kl_course_terms.push(txt);
}
});
kl_course_terms.sort();
// Loop through array and build options
$.each(kl_course_terms, function (index, el) {
kl_course_filter += '<option value="' + el + '">' + el + '</option>';
});
kl_course_filter += '</select></div>';
// Add the select before the course list
$('#my_courses_table').before(kl_course_filter);
// Filter the courses when a term is selected
$('#kl_course_filter').change(function () {
var selectedTerm = $('#kl_course_filter option:selected').text();
console.log(selectedTerm);
if (selectedTerm === 'View All') {
$('.course-list-table-row').show();
} else {
$('.course-list-table-row').hide();
$('.course-list-term-column:contains("' + selectedTerm + '")').closest('tr').show();
}
});
}
