Topic: Full calendar is not rendering on subsequent AJAX calls after the first call

mickey22 free asked 4 years ago


Expected behavior The first ajax call works perfectly. The data is returned and the calendar behaves as expected, updating the events dictionary. All subsequent calls, triggered by clicking on a date - while they return the correct data to the success function, the calendar continues to show data from the first call. It never updates. I have tried two things: - putting cache: false on the AJAX call, and - empty() on the div that displays the data. While the data does empty when calling it, the calendar still does not display with the new data, the div remains empty.

Actual behavior

Resources (screenshots, code snippets etc.)

$.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);
}

    $('#teacher_schedule').empty();

    $('#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");

    } 
}); 

You can test it on the dev site: StudySpot

Credentials: username: test4@test4.com password: lkjhlkjh Then click on Calendar on the profile page.
Then click on a date to see the ajax produced calendar in the overlay. -Notice the date does not change.
-Test data on April 16th, 2020


Mateusz Łubianka staff commented 4 years ago

Hi @mickey22,

Did you use the code from the example in our documentation? https://mdbootstrap.com/plugins/jquery/full-calendar/

Best,


mickey22 free commented 4 years ago

Yes, I used the JS code from the documentation as you can see in the link I provided. There are 2 instances of the calendar on the page. One is displaying the student schedule. The second is generated by ajax when a day is clicked on the calendar. The first click works fine. The second and subsequent clicks display data from the first click.


Mateusz Łubianka staff commented 4 years ago

The code from the above snippet is all the code associated with the calendar on your site?

Best,


mickey22 free commented 4 years ago

I put the code for the first calendar below.


Mateusz Łubianka staff answered 4 years ago


@mickey22,

You can try to use destroy() function and then reinitialize new callendar.

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

Best,


mickey22 free commented 4 years ago

Thanks, that did the trick.


Mateusz Łubianka staff commented 4 years ago

I'm glad I could help.

Best,


mickey22 free answered 4 years ago


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: ' ' 
        },


      });

    }

mickey22 free commented 4 years ago

This is the code for the first calendar on the page. The ajax produces the second one in a popup overlay.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.15.0
  • Device: PC
  • Browser: Opera
  • OS: Win 10
  • Provided sample code: No
  • Provided link: Yes