www.hkvforums.com

I've created a FullCalendar with link to open modal box showing info on the selected entry with the code like this:

$('#eventUrl').attr('href',ew.modalDialogShow({lnk:this,url:'UserEditAppointmentEdit/'+info.event.id}));

The page UserEditAppointmentEdit is from a View table and has a drop-down box on one of the fields. The page loaded directly from URL works fine with no errors.

But when the page is called as modal from the calendar link above, the drop-down box shows only a single entry with current value only. The F12 browser console shows error message: "Uncaught TypeError: Cannot read property 'user_edit_appointment' of undefined".

Clicking the debugger link takes to the Sources page which highlights the offending code fragment: "var fields = ew.vars.tables.user_edit_appointment.fields;". The rest of the code before and after is a typical PHPMaker created JS page code and this offending portion forms part of the "loadjs.ready("head", function () {" page creation code.

If I replace the page by UserEditAppointmentView everything works fine. If I replace it by another regular table also the same things happens: View mode of the page works, but Edit mode of the page fails with the same error message referencing the new table.

This is all very new and I've no idea what this means. Please guide on how to use the Edit mode instead of View mode.

With thanks for your help!

I tried out with other regular tables also. The same problem happens: it works fine in table View mode, but gives error in Edit mode (while showing basic form data, but no drop down content).

Looking at the Modal box code (source name VM3040.11) in F12, it starts like this:

var currentForm, currentPageID;
var fuser_edit_appointmentedit;
loadjs.ready("head", function () {
    var $ = jQuery;
    // Form object
    currentPageID = ew.PAGE_ID = "edit";
    fuser_edit_appointmentedit = currentForm = new ew.Form("fuser_edit_appointmentedit", "edit");
    // Add fields
    var fields = ew.vars.tables.user_edit_appointment.fields; //  <<== ******** ERROR MESSAGE HERE ***************

It then gives the exact same error message a second time in source name VM3042.6 which has just this:

loadjs.ready("head", function() {
    var el = document.querySelector("select[data-select2-id='user_edit_appointment_x_timeslot_id']"),
        options = { name: "x_timeslot_id", selectId: "user_edit_appointment_x_timeslot_id", language: ew.LANGUAGE_ID, dir: ew.IS_RTL ? "rtl" : "ltr" };
    options.dropdownParent = $(el).closest("#ew-modal-dialog, #ew-add-opt-dialog")[0];
    Object.assign(options, ew.vars.tables.user_edit_appointment.fields.timeslot_id.selectOptions); //  <<== ******** ERROR MESSAGE HERE ***************
    ew.createSelect(options);
});

But the same call made with any regular TableView shows much more header page code.

So it looks like ew.modalDialogShow can only show TableView and removes(?) headers in TableEdit.

Is there some way to work-around this?

I've updated the template run F9 (which should build all as I understand). The error pattern is still the same, but the error is in the very first line with the new code:

ew.vars.tables.appointments = {"tableCaption":"Appointments (Admin)", ...... etc

The same regular table works fine in modal View.

Please advise how to work-around.

For exampe, I'm calling: $('#eventUrl').attr('href',ew.modalDialogShow({lnk:this,url:'UserEditAppointmentEdit/'+info.event.id}));
but the following does not work: $('#eventUrl').attr('href','UserEditAppointmentEdit/'+info.event.id);

Thanks for your guidance!

Please refer to the following trick: viewtopic.php?f=18&t=49563

In other words, to call JavaScript, you need to use $('my-selector').on('click', ew.modalDialogShow(...)), not $('my-selector').attr('href', ew.modalDialogShow(...)).

Please refer to the following trick: viewtopic.php?f=18&t=49563

Thank you. This is so powerful, we can make amazing combinations with a little bit of conditional code!

you need to use $('my-selector').on('click', ew.modalDialogShow(...))

Thank you. I've made the change and also tried the following variations, but still the same error message:

$('#eventUrl').on('click',ew.modalDialogShow({lnk:this,btn:'EditBtn',url:'AppointmentsEdit/'+info.event.id})); // with AppointmentsEdit
$('#eventUrl').on('click',ew.modalDialogShow({lnk:this,btn:'EditBtn',url:'appointments/edit/'+info.event.id})); // with appointments/edit/

Same lines with View options works perfectly. Any work-around that you can suggest?

That is because of the this in your code lnk:this, it is not the link as in the original code, you may try, e.g.

$('#eventUrl').on('click', ew.modalDialogShow({lnk: $('#eventUrl')[0], btn: 'EditBtn', url: 'AppointmentsEdit/' + info.event.id}));

or

$('#eventUrl').on('click', function () {
ew.modalDialogShow({lnk: this, btn: 'EditBtn', url: 'AppointmentsEdit/' + info.event.id});
});

Hi:

I have the same problem, the modal doesn't show the drop-down data.

I've tried the solutions, but it doesn't work.

I've seen that when I call the modal from the original page (the edit link) I get the modal, and in the console I get some lookup calls to "api/lookup", but I don't get that calls when I call from my custom link.

I'm not sure if it could be the value of lnk, but I don't know what it should be.

Thanks

1. Are you sure you have the same issue? This old topic was about opening a modal dialog by custom code (not in regular pages generated by PHPMaker). You may describe your case more clearly.
2. Enable Debug, see the log file for server side errors.
3. You may press F12 in your browser, check the Console panel for JavaScript errors.

Hi:

Yes, it's exactly the same issue an the same code. I've set a fullcalendar and the event click is the same.
Like the OP, when I show the modal from the edit link generated by PHPMaker, the modal works. But if I open from the link, the Select2 field, for example, just show one record.
The others fields with lookup tables, don't show options.

Debug mode enabled: No errors on server side, but the lookup fields queries just show one record (they're filtered)

The console error shows the same errors from OP (obviously, change the property name)
"Uncaught TypeError: Cannot read property 'user_edit_appointment' of undefined".

thanks again.

josejad wrote:

Uncaught TypeError: Cannot read property 'user_edit_appointment' of undefined

That means user_edit_appointment is undefined, you need to check your JavaScript code, you may enter ew.vars.tables in the Console panel (Press F12 in the browser) to check the data available. It does not exist in older versions. Which version of PHPMaker are you using?

You need to post complete information, including the complete actual code and the actual code around the error line, so other users have enough information to help. (Go the the Console panel, follow the error message and find the source.)

SOLVED¡¡¡

Thanks again arbei, your hints give me the clue¡¡

I've added to my custom file calendar.php

<script>
if (!ew.vars.tables.planificacion) ew.vars.tables.planificacion = <?= JsonEncode(GetClientVar("tables", "planificacion")) ?>;
</script>

And now it works¡¡¡¡¡¡

THANKS AGAIN¡¡

josejad wrote:

SOLVED¡¡¡

Thanks again arbei, your hints give me the clue¡¡

I've added to my custom file calendar.php

<script>
if (!ew.vars.tables.planificacion) ew.vars.tables.planificacion = <?=
JsonEncode(GetClientVar("tables", "planificacion")) ?>;
</script>

And now it works¡¡¡¡¡¡

THANKS AGAIN¡¡

Hello, could you make a tutorial on the implementation of it? Many of us are having trouble implementing fullcalendar correctly. Greetings and thanks!

Perhaps this would help: Integrating fullcalendar and populating from json

mobhar wrote:

Perhaps this would help: Integrating fullcalendar and populating from json

I have already seen it, but none of the examples in the forum gives the fullcalendar utility of clicking on the calendar the form popup is displayed, in all of them you have to work on the form and then show the data in the calendar.

ddiaz2380 wrote:

I have already seen it, but none of the examples in the forum gives the fullcalendar utility of clicking on the calendar the form popup is displayed, in all of them you have to work on the form and then show the data in the calendar.

You must be doing something wrong. In all the examples, if you click a event, you will get a modal form to edit it.