Custom link to open Modal Edit page does not show dropdown data

SRanade · Post by **SRanade** » Fri Oct 30, 2020 11:05 pm

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!

SRanade · Post by **SRanade** » Sat Oct 31, 2020 11:35 am

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?

SRanade · Post by **SRanade** » Sat Oct 31, 2020 1:10 pm

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!

mobhar · Post by **mobhar** » Sun Nov 01, 2020 12:52 am

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

arbei · Post by **arbei** » Sun Nov 01, 2020 10:45 am

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

SRanade · Post by **SRanade** » Mon Nov 02, 2020 12:30 am

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?

arbei · Post by **arbei** » Mon Nov 02, 2020 10:36 am

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});
});

josejad · Post by **josejad** » Tue Jul 06, 2021 10:34 pm

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

arbei · Post by **arbei** » Tue Jul 06, 2021 10:55 pm

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.
Enable Debug, see the log file for server side errors.
You may press F12 in your browser, check the Console panel for JavaScript errors.

josejad · Post by **josejad** » Wed Jul 07, 2021 1:59 am

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.

arbei · Post by **arbei** » Wed Jul 07, 2021 8:07 am

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.)

josejad · Post by **josejad** » Wed Jul 07, 2021 3:37 pm

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Â¡Â¡

ddiaz2380 · Post by **ddiaz2380** » Wed Jul 14, 2021 12:26 pm

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!

mobhar · Post by **mobhar** » Wed Jul 14, 2021 1:46 pm

Perhaps this would help: Integrating fullcalendar and populating from json

ddiaz2380 · Post by **ddiaz2380** » Sat Jul 24, 2021 8:23 am

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.

josejad · Post by **josejad** » Thu Aug 05, 2021 2:44 pm

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.