search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

Reinitialize again Daypilot component or somehow destroy it on new reinit

Asked by Mikolaj
1 month ago.

Hello,
I am creating like json variable from dataTables on every new draw from it ( by ajax i am getting data which i transform to global variable as on image from dataTables)

on every request i must reinitialize function where i have things like new datatable, or google maps... or custom things... also i have there scheduler

function initDpScheduler() {
const dp = new DayPilot.Scheduler("dp");
....
do.init();
}

on fist init is working.. show me scheduler with data... but on second reinit i get issue like on image...

Is some function/option/api how init scheduler as on first load.. because i need "destroy" initialized DP and create new component DP again....

Is this possible ???

Answer posted by Dan Letecky [DayPilot]
1 month ago.

There are two options:

1. You can reuse the "dp" instance (and use the update() method to apply the new configuration).
2. Destroy and unbind the old instance by calling dispose():

https://api.daypilot.org/daypilot-scheduler-dispose/

Comment posted by Mikolaj
1 month ago.

Hi, thank you ... still stuck

I call my initDpScheduler() in daTatables .on(); ...this i can't change if page is loaded... because now dataTables working only on ajax and draws only itself by calling on every draw the initDpScheduler()

1. if i want use dp.update() method i have this problem

function initDpScheduler() {
const dp = new DayPilot.Scheduler("dp");
....
dp.init();
dp.update(resource=resourceJS,events=eventsJS);
}

on 2nd redraw of Datatables (2nd init) i got same issue as before: The target placeholder was already initialized by another DayPilot component instance.

If i change order that first is dp.update(resource=resourceJS,events=eventsJS); dp.init();
i got error: You are trying to update a DayPilot.Scheduler object that hasn't been initialized.

2. i am tryiny use dispose(); method.. but also get stuck.. my plan is find if scheduler initialized and if yes, dispose it and after

function initDpScheduler() {
if (typeof DayPilot.Scheduler === 'undefined' || DayPilot.Scheduler === null) {
const dp = new DayPilot.Scheduler("dp");
....
dp.init();
} else {
DayPilot.Scheduler.dispose();

const dp = new DayPilot.Scheduler("dp");
....
dp.init();
}
}

I got error DayPilot.Scheduler.dispose is not a function and if i use instead of it

dp.dispose(); can't access lexical declaration 'dp' before initialization

I know that i am missing something... but don't know what :(

Comment posted by Dan Letecky [DayPilot]
1 month ago.

Normally you initialize the scheduler just once, when the page loads. You need to store the "dp" variable at the top level so you can access it later during the page lifecycle.

If the Scheduler shouldn't be visible during the initial page load, use visible: false property in the config.

When you need to update the Scheduler, use the update() method.

Don't call init() twice on the same instance.

Schematically:

let dp = null;

function pageInit() {
  dp = new DayPilot.Scheduler("dp", { ... });
  dp.init();
}

function updateScheduler(eventsJS, resourcesJS) {
  dp.update({events: events, resources: resourcesJS});
}

Comment posted by Mikolaj
1 month ago.

Thank you again for your help
Can't upload image to comment. but here is link on screenshot https://ibb.co/vVY8ZjW

I used everything as you did upper... also fixed typo in your code (from events to eventsJS)

But as you can see from screenshot... still wont load second time scheduler because was already inititalized :(
Note: the page is not refreshing... datatables on every ajax call initalize those functions...

Please have you some suggestion ? Where i am wrong ?

Comment posted by Dan Letecky [DayPilot]
1 month ago.

Make sure that the pageInit() function is called just once - if you call it the second time it will throw an exception.

Comment posted by Mikolaj
1 month ago.

Thank you.. i as you wrote..
i inited this pageInit() function only once and that makes the trick... :)

Also i set up in pageInit() function dp.resources = []; dp.events.list = [];
because after load of pageInit(); will immediatelly updated by dp.update(); in update function

Thank a lot for your advices. You created great peace of sofware :)

New Reply
This reply is
Your name (optional):