kann den Vollkalender div nicht nach einem Ajax Post Klick

Question

Im Laden eines Kalenders über fullcalendar.

Ich habe einen AJAX-Button gemacht, um die Events von einer anderen PHP-Seite zu bekommen.

die Ajax-Taste funktioniert gut und ich bin in der Lage, die Json mit Ereignissen zu bekommen, und ich bekomme eine schöne Monatskalenderanzeige (auf meinem ersten Klick auf die Ajax-Taste).

Mein einziges Problem ist das: wenn ich die zweite Zeit auf der Ajax-Taste klicke, wird der Kalender nicht neu geladen/neu veröffentlicht/rendern .. und ich bleibe mit dem ersten Kalender (was irelevent für mich anyore ist).

Jeder weiß, was das Problem ist und was kann ich tun, um bei jedem Klick auf den Ajax-Button einen neuen Kalender neu zu veröffentlichen?

hier ist der Code:

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

oder vollständig in den Kalander zerstören, bevor es wieder zu machen, so etwas wie:

<form id="my-form-id" method="post" action="Calendar_form3.php"> Year: 
    <INPUT NAME="gregorian_year" SIZE=4 MAXLENGTH=4 value="2016">(1-6000) Latitude: 
    <INPUT NAME="latitude" value="40.7127"> Longitude: 
    <INPUT NAME="longitude" value="-74.0059"> <button id="ajax-button" type="button">Ajax button</button> </form> 
<script> 
    function displayCalendar() { 
     var target = document.getElementById("main"); 
     var formData = new FormData(document.getElementById("my-form-id")); 
     console.log(formData); 
     var xhr = new XMLHttpRequest(); 
     xhr.open('post', 'JewishCalendar_form3.php', true); 
     xhr.onreadystatechange = function() { 
      console.log('readyState: ' + xhr.readyState); 
      if (xhr.readyState == 2) { 
       target.innerHTML = 'Loading...'; 
      } 
      if (xhr.readyState == 4 && xhr.status == 200) { 
       var Month_details_for_display = JSON.parse(xhr.responseText); 
       //var Month_details_for_display= JSON.parse(Month_details_for_display2); 
       target.innerHTML = "funciton will start working..."; 
       displayCalendar222(Month_details_for_display); 
      } 
     } 
     xhr.send(formData); 
    } 

    function displayCalendar222(Month_details_for_display) { 
     alert("Hello! I am an alert box!!"); 
     var Events_In_Json = Month_details_for_display['EventsInSameStractureForAll']; 
     var json_backgrundColor = Month_details_for_display['Big_Calendar_cell_background_color']; 
     var json_iconstring = Month_details_for_display['iconString']; 
     var DefaulteDateForFullCalendarISO8601 = Month_details_for_display['fullMonthDetails']['DefaulteDateForFullCalendarISO8601']; 
     $('#calendar').fullCalendar({ 
      header: { 
       left: 'prev', 
       center: 'title', 
       right: 'next' 
      }, 
      events: Events_In_Json, 
      fixedWeekCount: false, 
      defaultDate: DefaulteDateForFullCalendarISO8601, 
      dayRender: function(date, cell) { 
       var cellDate = date.format('D'); 
       if (!cell.hasClass('fc-other-month')) { 
        //if this if is true that means that the day belongs to the current relevent month (and not the prev \ next month) 
        cell.css('background-color', json_backgrundColor[cellDate]); 
        //from here: cheking which icons to show 
        if (json_iconstring[cellDate].includes('HAV')) { 
         cell.prepend('<img src=\' icons/havdala2.png \'>'); 
        } 
        if (json_iconstring[cellDate].includes('Mod')) { 
         cell.prepend('<img src=\' icons/israel.png \'>'); 
        } 
        if (json_iconstring[cellDate].includes('Jewish')) { 
         cell.prepend('<img src=\' icons/jewish.png \'>'); 
        } 
        if (json_iconstring[cellDate].includes('PAR')) { 
         cell.prepend('<img src=\' icons/parasha.png \'>'); 
        } 
        if (json_iconstring[cellDate].includes('CL')) { 
         cell.prepend('<img src=\' icons/cl.png \'>'); 
        } 
        if (json_iconstring[cellDate].includes('Pub')) { 
         if (json_iconstring[cellDate].includes('USA')) { 
          cell.prepend('<img src=\' icons/usa.png \'>'); 
         } else if (json_iconstring[cellDate].includes('UK')) { 
          cell.prepend('<img src=\' icons/uk.png \'>'); 
         } else if (json_iconstring[cellDate].includes('CA')) { 
          cell.prepend('<img src=\' icons/canada.png \'>'); 
         } else if (json_iconstring[cellDate].includes('AUS')) { 
          cell.prepend('<img src=\' icons/australia.png \'>'); 
         } else if (json_iconstring[cellDate].includes('FR')) { 
          cell.prepend('<img src=\' icons/france.png \'>'); 
         } 
        } 
        //until here:: cheking which icons to show 
       } else { 
        //this days belongs to the prev \ next months. so we give them opacity)   
        cell.css('background-color', '#ffffff'); 
       } 
      }, 
     }); 
    } 
    var button = document.getElementById("ajax-button"); 
    button.addEventListener("click", displayCalendar); 
</script> 
<div id='main'> result here </div> 
<div id='calendar'></div> 

Answer 1

Das zweite Mal, wenn Sie auf die Schaltfläche klicken, können Sie so etwas wie nennen sollte :

$('#calendar').fullCalendar('destroy') 
       .empty() 
       .fullCalendar({ 
       //... 
       }); 

Siehe

• https://fullcalendar.io/docs/display/render/
• https://fullcalendar.io/docs/display/destroy/