We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

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


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?

5 Replies

PO Prince Oliver Syncfusion Team February 11, 2019 11:52 AM UTC

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: 


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

Regards, 
Prince 



ST Stefan February 11, 2019 08:18 PM UTC

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.


PO Prince Oliver Syncfusion Team February 12, 2019 09:45 AM UTC

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. 



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

Regards, 
Prince 



ST Stefan February 12, 2019 11:55 AM UTC

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.


PO Prince Oliver Syncfusion Team February 12, 2019 12:05 PM UTC

Hi Stefan, 

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

Regards, 
Prince 


Loader.
Live Chat Icon For mobile
Up arrow icon