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

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

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

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});
classCapacityObject.appendTo(classCapacityElement)
}
}



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. 



9 Replies

BS Balasubramanian Sattanathan Syncfusion Team 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.

 
Regards, 
Balasubramanian S 



JL jose lara 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? 


VD Vinitha Devi Murugan Syncfusion Team 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')); 
                                                  
Regards, 
M.Vinitha devi  



JL jose lara 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.

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

          Typescript

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;
container.appendChild(inputEle);
row.appendChild(container);
let inputobj: NumericTextBox = new NumericTextBox({value:22, placeholder: 'Class' ,format:'### person(s)'});
inputobj.appendTo(inputEle);
inputEle.setAttribute('name', 'classCapacity');
}





VD Vinitha Devi Murugan Syncfusion Team 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.  
 
Regards, 
M.Vinitha devi 



JB Jeff Butterworth 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
     }




NR Nevitha Ravi Syncfusion Team 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. 

Regards, 
Nevitha. 



MR Matthew Roberts December 6, 2022 11:03 PM UTC

How would you do this on a functional component?



RM Ruksar Moosa Sait Syncfusion Team December 8, 2022 06:54 AM UTC

Hi Matthew,


We have prepared a sample to add Numeric textbox field before the recurrence editor in react using functional components.


Sample: https://stackblitz.com/edit/react-5st55r?file=index.js


Output:


Regards,

Ruksar Moosa Sait


Loader.
Live Chat Icon For mobile
Up arrow icon