-
Notifications
You must be signed in to change notification settings - Fork 478
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Bug] Datepicker not working for the dynamically added elements #132
Comments
To fix this, you need to re-initialize the datepicker component after adding the new elements to the page. You can do this by calling the datepicker function again on the new elements. Here's an example of how you can do this: // Add the new datepicker elements to the page // Re-initialize the datepicker component on the new elements Alternatively, you can also use the datepicker function with the update option set to true to update the existing datepickers: $('.datepicker').datepicker('update'); In your case, you can add the following code after adding the new datepicker elements to the page: // Add the new datepicker elements to the page // Re-initialize the datepicker component on the new elements As for the additional comments, yes, the datepicker library doesn't automatically detect new elements added to the page. This is a common issue with many JavaScript libraries that rely on DOM manipulation. To work around this, you need to re-initialize the components or update the existing ones to make them functional again. |
Version
v1.2.0
Reproduction link
https://jsfiddle.net/8agyk0nu/28/#&togetherjs=M59CPKtfmx
Operating System
Linux
Device
Laptop
Browser & Version
Chromium Version 89.0.4389.90 (Official Build) Arch Linux (64-bit)
Steps to reproduce
Add dynamic content (html code) to a already loaded page (client side).
The client obtains the web page.
When a certain event happens (click a button) a JQuery script is launched to add dynamically content to the page.
The added content is a datepicker input with the following code :
What is expected?
When clicking on the newly added item the date pop-up would open and allow the user to choose a range.
What is actually happening?
Nothing. When clicking on the input field nothing happens.
Solution
Fix the observer system so that it would take into account new datepicker items that are added to the page.
Additional comments
The date-picker library works for the statically rendered content (directly asked from the server) but not for the one that's added afterwards (once the page was loaded).
This can be seen even on the https://demos.creative-tim.com/argon-design-system/docs/plugins/datepicker.html website.
When adding an datepicker directly in the DOM (using the browser->elements->copy datepicker element -> paste element somewhere in the page) the script won't work. Is there a way to tell the library to take into account the newly created elements ?
The text was updated successfully, but these errors were encountered: