Django/AJAX - New data is not getting rendered after first jQuery AJAX call (i.e. on subsequent calls)

Question

I have tried to set the cache property to false on the AJAX request, but it did absolutely nothing. I am implementing a JS calendar and when you click on any day, it opens a popup overlay that also includes another calendar. This second calendar is opened via ajax, and everything seems to be working on the first call which renders:

Then, upon closing the overlay and clicking another date on the calendar, I always get the first overlay, no matter how many times I click.

The AJAX call

$.ajax( 
                { 
                    type:"POST", 
                    url: "/teachers/teacherDayAgenda/", 
                    data:{ 
                        'event_date': dateClicked
                    }, 
                    dataType: 'json',
                    cache: false,
                    success: function( eventData ) {

                        var lessonEvents = [];
                        var lesson = {};

                        for (var key in eventData) {
                            if (key=="eventDefault")
                                break;
                            lesson = {};
                            lesson['title'] = "Lesson with "+eventData[key]['teacher_name'];
                            lesson['start'] = formatDate(moment(eventData[key]['timeslot_start']).toDate());
                            lesson['end'] = formatDate(moment(lesson['start']).add(40, 'm').toDate());
                            lessonEvents.push(lesson);
                        }
                        console.log(eventData);
                        $('#teacher_schedule').fullCalendar({
                             header: {
                                 left: 'prev,next today',
                                center: 'title',
                                right: 'agendaDay,listWeek'
                            },
                            defaultDate: eventData['event0']['click_event_date'],
                            navLinks: true,
                            eventLimit: true,
                            events: lessonEvents
                        });

                        $("#teacher_schedule .fc-agendaDay-button").trigger("click");
                        /*$('td').removeClass('AddEventPopup_open'); */
                    } 
                });

The View:

@login_required
def teacherDayAgenda(request):
    """
    Ajax request for popup overlay, changes to student schedule, see day agenda of availability of teachers
    """
    if request.method == 'POST':
        click_event_date = request.POST['event_date']
        studentid = request.user.id
        default_teacher_id = StudentProfile.objects.has_default_teacher(
            studentid)


        # default event values 
        ev = {}
        d = {'eventDefault': True, 'click_event_date': click_event_date}
        ev['event0'] = d

        if default_teacher_id:
            ev = {}
            events = TeacherProfile.objects.filter(id=default_teacher_id).filter(
                student_id__isnull=True).values_list('timeslot_start', 'teacher_id')
            i=0
            for event in events:
                d = {}
                d['timeslot_start'] = _datetime_to_string(event[0])
                teacherName = User.objects.get_staff_name(event[1])
                d['teacher_name'] = teacherName
                d['click_event_date'] = click_event_date
                ev['event'+str(i)] = d
                i += 1


        else:
            first_teacher_obj = TeacherProfile.objects.get_all_available_teachers()[
                0]
            first_teacher_id = getattr(first_teacher_obj, 'teacher_id')
            events = TeacherAvailability.get_dayagenda(
                request, first_teacher_id, click_event_date)

            i=0
            for event in events:
                d = {}
                d['timeslot_start'] = _datetime_to_string(event[0])
                d['student_id'] = event[1]
                teacherName = User.objects.get_staff_name(event[2])
                d['teacher_name'] = teacherName
                d['click_event_date'] = click_event_date
                ev['event'+str(i)] = d
                i += 1


        return JsonResponse(ev)

    else:
        return HttpResponse("unsuccesful")

(EDIT1) First Calendar init code

function initializeCalendar(){

        $('#calendar').fullCalendar({
        header: {
          left: 'prev,next today',
          center: 'title',
          right: 'month,agendaWeek,agendaDay,listWeek'
        },
        defaultDate: today,
        navLinks: true,
        editable: true,
        eventLimit: true,
        selectable: true,
        events: [{
            title: 'Simple static event',
            start: '2018-11-16',
            description: 'Super cool event'
          },

        ],
        customButtons: { addEventButton: { text: 'Add Event', class:'AddEventPopup_open', click: function() { 
            return true;
         }} 
        },
        footer: {left: ' ', center: 'addEventButton', right: ' ' 
        },


      });

    }

I have found this question to be quite relevant to my problem, however I don't quite know what to do in my particular case. https://stackoverflow.com/questions/16062899/jquery-doesnt-work-after-content-is-loaded-via-ajax — Lawrence DeSouza, Apr 15 '20 at 04:05
Just added the init code for the first calendar. I have tried to contact MDB to see if they could offer some clues, but haven't received any help from them. The problem seems to be related to event handler bindings, but I still haven't found the right solution for my case. — Lawrence DeSouza, Apr 15 '20 at 18:48
@LawrenceDeSouza Can you add the click trigger code that executes the AJAX request? Where do you put that code on which event handler and how? — Christos Lytras, Apr 16 '20 at 15:18
Resolved this. Just had to destroy the plugin for the calendar in the overlay onclose. I just received the response, finally from the company that makes the plugin. I hate those black box plugins with scrambled code, can't make changes or see anything with those. — Lawrence DeSouza, Apr 16 '20 at 17:06

score 0 · Answer 1 · answered Apr 21 '20 at 12:29

I would try adding the never_cache decorator to the view:

from django.views.decorators.cache import never_cache


@login_required
@never_cache
def teacherDayAgenda(request):
    ...

See:

https://docs.djangoproject.com/en/3.0/topics/http/decorators/#caching

score 0 · Accepted Answer · edited Apr 26 '20 at 13:56

0

The solution for the MDB calendar plugin is to just destroy the element and run the code again when a day is clicked.

$('#calendar').fullCalendar('destroy');

I have decided to use a free, open source calendar instead anyway.

edited Apr 26 '20 at 13:56

halfer

19,824
17
99
186

answered Apr 21 '20 at 13:18

Lawrence DeSouza

984
5
16
34

Django/AJAX - New data is not getting rendered after first jQuery AJAX call (i.e. on subsequent calls)

2 Answers2