Call ew.modalDialogShow() in custom file

PHPMaker General Discussion (PHPMaker)
1

Hi there:I’m using this code to open a modal window from a custom page (calendar), working fine in v2021

			switch (info.event.extendedProps.tipo_evento) {
			  case 'vacaciones':
				$('#eventUrl').attr('href',ew.modalDialogShow({lnk:this,btn:'SaveBtn',url:'SolicitudVacacionesViewedit?id='+info.event.id}));
				break;
			  case 'planificacion':
				$('#eventUrl').attr('href',ew.modalDialogShow({lnk:this,btn:'SaveBtn',url:'PlanificacionEdit/'+info.event.id}));
				break;
			  default:
				console.log('No hay una opción para ' + info.event.extendedProps.tipo_evento + '.');
			}

When I click the link it should open the modal, I get this error

Uncaught TypeError: Cannot read property 'closest' of undefined
    at Bt._setListeners (tooltip.js:550)
    at new Bt (tooltip.js:145)
    at Function.getOrCreateInstance (base-component.js:55)
    at Calendar.<anonymous> (tooltip.js:732)
    at Function.each (jquery-3.6.0.min.js:2)
    at S.fn.init.each (jquery-3.6.0.min.js:2)
    at S.fn.init.jQueryInterface [as tooltip] (tooltip.js:731)
    at Object.modalDialogShow (ew.js:6341)
    at Calendar.eventClick (VacacionesCal:427)
    at Emitter.trigger (main.js:4718)

There’s no network activity in the network tab of Chrome console.Line 550 of tooltip.js is

EventHandler.on(this._element.closest(SELECTOR_MODAL), EVENT_MODAL_HIDE, this._hideModalHandler)

Thanks

2

josejad wrote:

Uncaught TypeError: Cannot read property ‘closest’ of undefined
at Bt._setListeners (tooltip.js:550)
at new Bt (tooltip.js:145)
at Function.getOrCreateInstance (base-component.js:55)
at Calendar. (tooltip.js:732)

As the error message says, you have JavaScript error with your Calendar, it seems that it is trying to use Bootstrap tooltip.

3

As always, thank you.
I use a tip in my calendar, but I’ve deleted all the references and the error remais.
The problem is in the ew.modalDialogShow, when I call it, I get the error.The “strange” thing is:this works:

		BtnAddi: {  //A button over the calendar
			text: 'Añadir plani',
			click: function() {
				ew.modalDialogShow({lnk:this,btn:'SaveBtn',url:'PlanificacionAdd?modal=1'});
			}
		}

this don’t work, I get the error

eventClick:  function(info) {
	ew.modalDialogShow({lnk:this,btn:'SaveBtn',url:'PlanificacionEdit?id='+info.event.id});
	//window.open('PlanificacionEdit?id='+info.event.id);  //this works¡¡¡¡¡¡¡
},
4

I don’t know how your code works (probably they are options of your Calendar). Are you sure that the “this” in your code (i.e. “lnk:this”) refers to the button element? I guess not, so the error says an element is “undefined”. You better check how what the context “this” is in your code. If “this” is not the button, you need to pass the actual HTML element or a CSS selector as the “lnk”, e.g. “lnk: ‘#my-id’, …”.

5

Thanks¡¡ That’s the problem.
In that context, ‘this’ is ‘Calendar’.
If I change to any other thing (i.e. ‘’) it works.
I think the right element should be: “fc-event-main” (every calendar event)Thanks again¡¡¡