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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

142564 Feb 10,2019 10:16 PM UTC Feb 12,2019 12:05 PM UTC JavaScript - EJ 2 5
loading
Tags: Dialog
Stefan
Asked On February 10, 2019 10:22 PM UTC


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 [Syncfusion]
Replied On 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 


Stefan
Replied On 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.

Prince Oliver [Syncfusion]
Replied On 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 


Stefan
Replied On 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.

Prince Oliver [Syncfusion]
Replied On 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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon