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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Failed to execute 'closest' on 'Element': '.' is not a valid selector

Thread ID:





148972 Nov 9,2019 11:16 PM UTC Feb 17,2021 06:50 AM UTC Angular - EJ 2 7
Tags: Schedule
jose lara
Asked On November 9, 2019 11:16 PM UTC

<td class="e-textlabel">Capacity</td>
<td colspan="2"> <input type = "text" id="classCapacity" class="e-field" name="classCapacity"/></td>

onPopupOpen(args: PopupOpenEventArgs): void {
if (args.type === 'Editor') {
let classCapacityElement: HTMLInputElement = args.element.querySelector('#classCapacity') ;
if (!classCapacityElement.classList.contains('e-numerictextbox')) {
let classCapacityObject: NumericTextBox = new NumericTextBox({placeholder:'',value:23});

I am getting an error that reads "Failed to execute 'closest' on 'Element': '.' is not a valid selector." when I try to close the editor window. The numeric text box works, but I am not able to close or save the editor window, as it is throwing that error. 

Balasubramanian Sattanathan [Syncfusion]
Replied On November 11, 2019 12:44 PM UTC

Hi Jose Lara, 

Greetings from Syncfusion Support. 

We have prepared sample based on your requirement.  


Kindly try the above sample and let us know if you need any further assistance on this.

Balasubramanian S 

jose lara
Replied On November 11, 2019 04:26 PM UTC

Hi, although this works, I have a follow up question. In your example, you are dynamically creating  it in the controller and placing it as the first element on the form.  How can I position the numeric text box in a desired location within the popup? For example, if I want this to appear specifically after the first two elements, how can I specify that? 

Vinitha Devi Murugan [Syncfusion]
Replied On November 12, 2019 11:42 AM UTC

Hi Jose, 
Syncfusion Greetings. 
You can place the custom field wherever you want in the editor. We have prepared the sample below to append the custom field before the allDay row. Please refer it. 
formElement.firstChild.insertBefore(row, args.element.querySelector('.e-all-day-time-zone-row')); 
M.Vinitha devi  

jose lara
Replied On November 13, 2019 04:35 AM UTC

I tried to add an element before recurrence editor. But I am getting this error - ERROR DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

<td class="e-textlabel">From</td>
<td colspan="4">
<input id="StartTime" class="e-field" type="text" name="StartTime" />


let startElement: HTMLInputElement = args.element.querySelector('#StartTime') as HTMLInputElement;
if (startElement){
if (!startElement.classList.contains('e-datetimepicker')) {
new DateTimePicker({ value: new Date(startElement.value) || new Date() }, startElement);

if (!args.element.querySelector('.custom-field-row1')) {
let row: HTMLElement = createElement('div', { className: 'custom-field-row1' });
let formElement: HTMLElement = <HTMLElement>args.element.querySelector('.e-schedule-form');
formElement.firstChild.insertBefore(row, args.element.querySelector('#StartTime'));
let container: HTMLElement = createElement('div', { className: 'custom-field-container1' });
let inputEle: HTMLInputElement = createElement('input', {
className: 'e-field', attrs: { id:'capacity' }
}) as HTMLInputElement;
let inputobj: NumericTextBox = new NumericTextBox({value:22, placeholder: 'Class' ,format:'### person(s)'});
inputEle.setAttribute('name', 'classCapacity');

Vinitha Devi Murugan [Syncfusion]
Replied On November 13, 2019 11:12 AM UTC

Hi Jose, 
Thanks for your update. 
Kindly use below code to append the numeric text box field before the recurrence editor. 
formElement.firstChild.insertBefore(row, args.element.querySelector('.e-time-zone-row')); 
Kindly try the sample and if the issue persists, try to reproduce the error in a sample and revert else share your code example/runnable sample (if possible) to serve you better.  
M.Vinitha devi 

Jeff Butterworth
Replied On February 16, 2021 04:29 AM UTC

For anyone else who stumbles across this well trying to fix the "Failed to execute closed on element" error, the bit of magic required to fix the issue seems to be to make sure to make sure to call setAttribute again after you have created the new element EVEN IF YOU HAVE THE NAME ATTRIBUTE SET ON THE ORIGINAL ELEMENT!

     let durationEl = args.element.querySelector("#qiEstDuration");
     if (!durationEl.classList.contains("e-numerictextbox")) {
          let durationTextBox = new ej.inputs.NumericTextBox({ value: args.data.EstDuration }, durationEl);
    durationEl.setAttribute('name', 'EstDuration');   <------- THIS BIT IS WHAT FIXED THE PROBLEM FOR ME

Nevitha Ravi [Syncfusion]
Replied On February 17, 2021 06:50 AM UTC

Hi Jeff, 

Greetings from Syncfusion Support. 

Yes you have to set the attribute name/data-name to the element to resolve the script error, please get back to us if you need any further assistance. 



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