I am facing an issue with my Django template that showcases scheduled classes for our training department. Each item in the list has a roster button which, when clicked, should display the class roster in a div. This functionality works perfectly. However, on the same page we have a Javascript date control that allows users to select a specific class date and view only the classes held on that day. Unfortunately, the click event for the Roster button does not trigger when the class list is generated via Ajax.
classes.html
<h1>Upcoming Classes</h1>
Class Date: <input type='text' id='datepicker' name='date'/>
<div id='class_listing'>
<ul id='class_list'>
{% if classes %}
{% for c in classes %}
<li>
<div class='class_info'>
<ul class='class_list_item'>
<li>
<h4>
<a href="{% url 'training:class_detail' c.id %}">
{{ c.course.course_name }}
</a>
</h4>
</li>
<li>
<h6>
Start Date: {{ c.get_start_date }}
</h6>
</li>
<li>
<h5>{{ c.location }}</h5>
</li>
<li>
<button class='list_button' value='{{ c.id }}'>Roster</button>
</li>
</ul>
<div class='roster'></div>
<div class='button_menu'><button>Test</button></div>
</div>
</li>
{% endfor %}
</ul>
{% else %}
<p>No classes available</p>
{% endif %}
</div>
While this setup functions correctly, I encounter problems when processing the selected date to generate a list of classes for that specific day as the roster button stops working.
My view:
def getclasslisting(request):
if request.method == 'GET':
date = request.GET['date']
month, day, year = date.split('/')
formatted_date = year + '-' + month + '-' + day
schedule = Schedule.objects.filter(class_date=formatted_date)
if not schedule:
html = '<h4>No classes scheduled on ' + formatted_date + '</h4>'
else:
html = "<ul id='class_list'>"
for s in schedule:
html += "<li><div class='class_info'><ul class='class_list_item'>"
html += "<li><h4><a href='#'>" + s.scheduled_class.course.course_name + "</a></h4></li>"
html += "<li><h6>Start Date: " + s.scheduled_class.get_start_date() + "</h6></li>"
html += "<li><h5>" + s.scheduled_class.location.name + "</h5></li>"
html += "<li><button class='list_button' value='" + str(s.scheduled_class.id) + "'>Roster</button></li></ul>"
html += "<div class='roster'></div><div class='button_menu'></div></div></li></ul>"
else:
pass
return HttpResponse(html)
Finally, the javascript:
$( document ).ready(function() {
$('#toggle').click(buildMenu);
$('.list_button').click(getRoster);
$("#datepicker").datepicker({
onSelect: function(dateText) {
var date = $('#datepicker').datepicker({ dateFormat: 'yy-mm-dd' }).val();
$.get('/training/getclasslisting', {date:date}, function(data){
$('#class_listing').empty();
$('#class_listing').append(data);
});
//alert("Selected date: " + dateText + "; input's current value: " + date);
}
});
})
function getRoster() {
var roster = $(this).closest("ul").next();
var id = parseInt(this.value);
$.get('/training/getroster', { id:id}, function(data){
if (roster.is(':empty')) {
roster.append(data);
} else {
roster.empty();
}
alert("Clicked!");
});
}
Despite reviewing the DOM structure between the HTML page, where it works, and the JavaScript code, where it doesn't work, I couldn't identify any discrepancies. Additionally, I added an alert statement in the JavaScript function to determine if it gets triggered, but it didn't. Do you have any insights into what might be causing this issue? At this point, I believe it could be a simple oversight on my part.