Uncaught TypeError: Cannot read property 'classList' of undefined on dialog.show()

[Stefan]

Stackblitz example

I'm trying to create a simple Dialog. Whenever I want to show it, I receive an error Uncaught TypeError: Cannot read property 'classList' of undefined.

Uncaught TypeError: Cannot read property 'classList' of undefined

    at t.show (treemap.ts:2)

    at someDialog (myHtml:559)

    at :1:1

t.show @ treemap.ts:2

someDialog @ myHtml:559

(anonymous) @ VM16734:1

HTML (open/close tags stripped because they don't get escaped here)

div id="dialogtest"

JS:

     function someDialog() {

            let someDialog = new ej.popups.Dialog({

                target: document.getElementById('dialogtest'),

                header: 'Confirmation Dialog',

                content: "This is a Confirmation Dialog!",

                buttons: [

                    {

                        'click': () => { this.hide(); },

                        buttonModel: { isPrimary: true, cssClass: 'e-flat', content: 'OK' }

                    },

                    {

                        'click': () => { this.hide(); },

                        buttonModel: { content: 'Cancel', cssClass: 'e-flat' }

                    }

                ],

                showCloseIcon: true,

                closeOnEscape: true,

                close: () => { console.log("closing..."); }

            });

            someDialog.show();

        };

Could you please advise what I am doing wrong?

[Prince Oliver]

Hi Stefan, 

Thank you for contacting Syncfusion support. 

We were able to reproduce the reported issue in our end. This script error is raised due to accessing the dialog public method (Open method) before the component is appended to any element in the DOM. So, to fix this, we suggest you append dialog component to any element in the page and then use the open method. We have modified the shared sample, please find the sample at the following location: 

Sample: https://stackblitz.com/edit/js-udykgk 

Please let us know if you need any further assistance on this.  

Regards, 

Prince 

[Stefan]

Thanks a lot.
I thought that by specifying a target it would do exactly that, attaching to a target.

And actually, if I specify both a target and .appendTo(#targetId) I get another exception:

Uncaught DOMException: Failed to execute 'appendChild' on 'Node': The new child element contains the parent.

    at t.initRender (https://cdn.syncfusion.com/ej2/dist/ej2.min.js:10:567642)

    at t.render (https://cdn.syncfusion.com/ej2/dist/ej2.min.js:10:562276)

    at t.appendTo (https://cdn.syncfusion.com/ej2/dist/ej2.min.js:10:411396)

    at addMeDialog (https://localhost:44329/schedule:600:15)

    at t.onPopupOpen (https://localhost:44329/schedule:384:24)

    at e.notify (https://cdn.syncfusion.com/ej2/dist/ej2.min.js:10:346784)

    at t.e.trigger (https://cdn.syncfusion.com/ej2/dist/ej2.min.js:10:349009)

    at e.beforeQuickPopupOpen (https://cdn.syncfusion.com/ej2/dist/ej2.min.js:10:7113743)

    at e.eventClick (https://cdn.syncfusion.com/ej2/dist/ej2.min.js:10:7104808)

    at e.notify (https://cdn.syncfusion.com/ej2/dist/ej2.min.js:10:346784)

t.initRender @ treemap.ts:2

t.render @ treemap.ts:2

t.appendTo @ treemap.ts:2

addMeDialog @ schedule:600

onPopupOpen @ schedule:384

e.notify @ treemap.ts:2

e.trigger @ treemap.ts:2

e.beforeQuickPopupOpen @ treemap.ts:2

e.eventClick @ treemap.ts:2

e.notify @ treemap.ts:2

t.notify @ treemap.ts:2

e.eventClick @ treemap.ts:2

So this is leaving me slightly confused as to what the correct way to go about this is.

[Prince Oliver]

Hi Stefan, 

Thank you for your update. 

We cannot specify same element to the target and appendTo properties as per dialog components behavior.  

• The target property is used for positioning the dialog based on a specified target. if target is not specified, then the dialog considers the document body as the target by default.
• The appendTo is mandatory to render any EJ2 components. This is base element to initialize the component that is used to append the dialog in a page.

So, we suggest you keep different element for target as well as appendTo properties. 

Sample: https://stackblitz.com/edit/js-uivw7x  

API: https://ej2.syncfusion.com/documentation/api/dialog/#target  

Please let us know if you need any further assistance on this. 

Regards, 

Prince 

[Stefan]

Thank you very much, this is now all much clearer. I misread the documentation, the distinction of the target element and the one the dialog is appended to wasn't clear to me.

[Prince Oliver]

Hi Stefan, 

Most Welcome. We are glad to help you. Please let us know if you need any further assistance on this. 

Regards, 

Prince