onViewChange fires multiple times on SPA


#1

I have a single page application running on index.php. In a div I load calendar.php that contains the scheduler. The scheduler is on current month. I load another page in the same div instead of calendar.php, i go back to calendar.php and scheduler.load is called once.
The scheduler is on a different month. I load another page in the same div instead of calendar.php and then I go back to calendar.php and scheduler.load is called three times.
My code is the following:
var updateView = 0;

//verifico se ho cambiato data (cliccato sui pulsanti avanti e indietro)
scheduler.attachEvent("onBeforeViewChange", function(old_mode,old_date,mode,date){
	if(old_date && date){
      if(formatFunc(old_date) != formatFunc(date)){
        updateView = 1;
		var year = date.getFullYear();
		var month= (date.getMonth() + 1);
		var d = new Date(year, month, 0);
		var daysInMonth = d.getDate();
		var timeline = scheduler.getView('timeline'); 
		timeline.x_size = daysInMonth;
      } else {
        updateView = 0;
      }
    }else{
		updateView=0;
	}
	return true;
});

scheduler.attachEvent("onViewChange", function (new_mode , new_date){
	if(updateView==1){
		updateView=0;
		//costruisco il range di data del mese scelto
		var dataScelta = new Date(new_date);
		var firstDay = new Date(dataScelta.getFullYear(), dataScelta.getMonth(), 1);
		var lastDay = new Date(dataScelta.getFullYear(), dataScelta.getMonth() + 1, 0);
        year = dataScelta.getFullYear();
		month = '' + (dataScelta.getMonth() + 1);
		if (month.length < 2) 
        	month = '0' + month;
        dayStart='01';
		dayEnd=''+lastDay.getDate();
		firstDay= [year,month,dayStart].join('-');
	    lastDay= [year, month, dayEnd].join('-');
		scheduler.load('endpoints/queryReservations.php?hotel='+idStruttura+'&inizio='+firstDay+'&fine='+lastDay);
		return true;
	}
});
$(function(){
    scheduler.init(...); 
    scheduler.load('endpoints/queryReservations.php?hotel='+idStruttura+'&inizio='+firstDay+'&fine='+lastDay);
});

I’d expect that once I load something else in that div instead of calendar.php then the whole scheduler gets destroied but looks like the events are still attached and on the second load get reattached again


#2

Hello @Lelio_Faieta,

Currently the scheduler doesn’t have a destructor and it keeps events attached after it’s reinitialized. The thing that you can do to fix this issue - is to manually detach events on each scheduler reinitializing:

1.) make sure that events are attached only once when you initialize the scheduler for the first time
2.)detach old events before initializing the scheduler. Here is how it can be done -
scheduler.attachEvent returns id of the event handler, which can be used to detach event later:
https://docs.dhtmlx.com/scheduler/api__scheduler_attachevent.html
https://docs.dhtmlx.com/scheduler/api__scheduler_detachevent.html

So using these two methods is desired approach for work with event handlers.

Kind regards,