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

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

Thread ID:

Created:

Updated:

Platform:

Replies:

148972 Nov 9,2019 11:16 PM UTC Nov 13,2019 11:12 AM UTC Angular - EJ 2 5
loading
Tags: Schedule
jose lara
Asked On November 9, 2019 11:16 PM UTC

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. 



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.

 
Regards, 
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')); 
                                                  
Regards, 
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.

         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');
}




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.  
 
Regards, 
M.Vinitha devi 


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