jquery3.js:2 Uncaught RangeError: Maximum call stack size exceeded

[ghenneParticipant]

We are getting this message intermittently. We have not been able to reproduce it yet.

Here’s the complete error message:

jquery3.js:2 Uncaught RangeError: Maximum call stack size exceeded
    at oe.select (jquery3.js:2)
    at Function.oe [as find] (jquery3.js:2)
    at w.fn.init.find (jquery3.js:2)
    at new w.fn.init (jquery3.js:2)
    at w (jquery3.js:2)
    at c.(:49742/Vertrieb/anonymous function)._renderMonthAppointments (http://127.0.0.1:49742/Vertrieb/node_modules/jqwidgets-framework/jqwidgets/jqxscheduler.js:8:250161)
    at c.(:49742/Vertrieb/anonymous function)._renderAppointments (http://127.0.0.1:49742/Vertrieb/node_modules/jqwidgets-framework/jqwidgets/jqxscheduler.js:8:237281)
    at c.(:49742/Vertrieb/anonymous function)._renderrows (http://127.0.0.1:49742/Vertrieb/node_modules/jqwidgets-framework/jqwidgets/jqxscheduler.js:8:213709)
    at c.(:49742/Vertrieb/anonymous function)._updatecolumnwidths (http://127.0.0.1:49742/Vertrieb/node_modules/jqwidgets-framework/jqwidgets/jqxscheduler.js:8:274794)
    at c.(:49742/Vertrieb/anonymous function)._updateScrollbars (http://127.0.0.1:49742/Vertrieb/node_modules/jqwidgets-framework/jqwidgets/jqxscheduler.js:8:35546)

The initialization code is straightforward. Note that your editor does not display the JavaScript string interpolation character properly: it substitutes .

 element.jqxScheduler({
    date: new JqxDate('todayDate'),
    appointmentDataFields: {
      from: 'from',
      to: 'to',
      id: 'id',
      description: 'description',
      subject: 'subject',
      resourceId: 'calendar',
      draggable: 'draggable',
      email: 'email',
      address: 'address',
      phone: 'phone',
    },
    source: adapter,
    resources: {
      colorScheme: 'scheme05',
      dataField: 'calendar',
      source: new JqxDataAdapter(source),
    },
    editDialog: true,
    editDialogCreate: frmCalendar.editDialogCreate,
    editDialogOpen: ((dialog, fields, editAppointment) => {
      if (editAppointment) {
        jqxSchedulerSubject.innerHTML = <code>${editAppointment.subject}</code>;
        jqxSchedulerFrom.innerHTML = <code>${editAppointment.from}</code>;
        jqxSchedulerTo.innerHTML = <code>${editAppointment.to}</code>;
        jqxSchedulerDescription.innerHTML = <code>${editAppointment.description}</code>;
        jqxSchedulerCalendar.innerHTML = <code>${editAppointment.resourceId}</code>;
        jqxSchedulerEmail.innerHTML = <code><a href='mailTo:${editAppointment.email}'>${editAppointment.email}</a></code>;
        jqxSchedulerAddress.textContent = editAppointment.address;
        jqxSchedulerPhone.innerHTML = <code><a href='tel:${editAppointment.phone}'>${editAppointment.phone}</a></code>;
      }
    }),
    contextMenu: false,
  });

editDialogCreate is called out, but doesn't seem to do anything fancy:

frmCalendar.initScheduler = (dataSet, element) => {
  'use strict';

  $(<code>#${element[0].id}</code>).off('cellDoubleClick');
  $(<code>#${element[0].id}</code>).on('cellDoubleClick', () => {
    element.jqxScheduler({
      editDialog: false,
    });
  });

  $(<code>#${element[0].id}</code>).off('appointmentDoubleClick');
  $(<code>#${element[0].id}</code>).on('appointmentDoubleClick', () => {
    element.jqxScheduler({
      editDialog: true,
    });
  });

  dataSet.forEach((appt) => {
    const appointment = {
      id: appt.id,
      description: appt.comment,
      location: '',
      subject: appt.cardName,
      calendar: appt.type,
      from: new Date(appt.date),
      to: new Date(appt.date),
      draggable: false,
      email: appt.contact.mail,
      address: <code>${appt.address.address2}, ${appt.address.address3}</code>,
      phone: appt.contact.phone,
    };
    frmCalendar.appointments.push(appointment);
  });

  const source = {
    dataType: 'array',
    dataFields: [
      { name: 'id', type: 'string' },
      { name: 'description', type: 'string' },
      { name: 'location', type: 'string' },
      { name: 'subject', type: 'string' },
      { name: 'calendar', type: 'string' },
      { name: 'from', type: 'date' },
      { name: 'to', type: 'date' },
      { name: 'draggable', type: 'boolean' },
      { name: 'email', type: 'string' },
      { name: 'address', type: 'string' },
      { name: 'phone', type: 'string' },
    ],
    id: 'id',
    localData: frmCalendar.appointments,
  };

  const JqxDataAdapter = $.jqx.dataAdapter;
  const JqxDate = $.jqx.date;
  const adapter = new JqxDataAdapter(source);

  element.jqxScheduler({
    date: new JqxDate('todayDate'),
    appointmentDataFields: {
      from: 'from',
      to: 'to',
      id: 'id',
      description: 'description',
      subject: 'subject',
      resourceId: 'calendar',
      draggable: 'draggable',
      email: 'email',
      address: 'address',
      phone: 'phone',
    },
    source: adapter,
    resources: {
      colorScheme: 'scheme05',
      dataField: 'calendar',
      source: new JqxDataAdapter(source),
    },
    editDialog: true,
    editDialogCreate: frmCalendar.editDialogCreate,
    editDialogOpen: ((dialog, fields, editAppointment) => {
      if (editAppointment) {
        jqxSchedulerSubject.innerHTML = <code>${editAppointment.subject}</code>;
        jqxSchedulerFrom.innerHTML = <code>${editAppointment.from}</code>;
        jqxSchedulerTo.innerHTML = <code>${editAppointment.to}</code>;
        jqxSchedulerDescription.innerHTML = <code>${editAppointment.description}</code>;
        jqxSchedulerCalendar.innerHTML = <code>${editAppointment.resourceId}</code>;
        jqxSchedulerEmail.innerHTML = <code><a href='mailTo:${editAppointment.email}'>${editAppointment.email}</a></code>;
        jqxSchedulerAddress.textContent = editAppointment.address;
        jqxSchedulerPhone.innerHTML = <code><a href='tel:${editAppointment.phone}'>${editAppointment.phone}</a></code>;
      }
    }),
    contextMenu: false,
  });
};

What could it be?

[HristoParticipant]

Hello ghenne,

Could you provide us with more details? Which framework do you use?
I saw that you try to set current date but our object to do this is new $.jqx.date().
Also, another thing you use some “initScheduler()” function.
I would like to mention that it is important to initialize one widget just once otherwise this could be a reason for many issues.
If you want to have some reactions with and on the jqxScheduler you should use its events and methods.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[ghenneParticipant]

The project is developed using NSB/AppStudio. Most of the other controls are Bootstrap 4.

I’ll fix the date.

Yes, it’s possible that the widget is being initialized more than once. I’ll fix that too, and report back if that does not fix the issue.

[ghenneParticipant]

What is the proper way to update the data on a jqxScheduler after it has been displayed already?

Edit: I believe I have found the answer:

adapter = new $.jqx.dataAdapter(source);
 $("#scheduler").jqxScheduler('source', adapter);

[HristoParticipant]

Hello ghenne,

Yes, this is a good approach.
Also, you could use it on that way:
$("#scheduler").jqxScheduler({ source: adapter });.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts