Refactor form.js to allow custom field initializer callbacks
#469
Conversation
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #469 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 75 75
Lines 5779 5780 +1
=========================================
+ Hits 5779 5780 +1 ☔ View full report in Codecov by Sentry. |
|
@jowilf I want to ask you something, do we have a way to watch the entire documentation and initialize some JS when an element with a certain selector is created? For example, trigger |
|
I'm not sure if I fully understand your question but if you create an element you need to call You don't have to watch the entire document if you can control when the element is created. |
Let me try to explain one more time. Do you know anything about HTMX? I'm using it in my project. Here is an example of what I am doing... </> htmx ~ Examples ~ Modal Dialogs with UIKit. Navigate to this page and click "Show Modal Dialog". The modal content (a form) is fetched from the backend. So the backend returns an HTML, and HTMX puts it where we tell it to put. Let's say that one of the inputs in that form is a JavaScript-initialized field, let's assume it is a TinyMCE Editor and it has this class: So what I am asking is this, is there any way to "watch" the document and trigger a function (Field initializer) when an element is created with a certain selector, in this example: Even if I can not trigger a function based on the content of the response and I don't want to put an extra "script" file loader into that response, I can still add I hope this one was clear enough. |
|
I have found these two JS packages: kubetail-org/sentineljs: Detect new DOM nodes using CSS selectors (650 bytes) <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>ArriveJS</title>
<script src="https://cdn.rawgit.com/muicss/sentineljs/0.0.7/dist/sentinel.min.js"></script>
</head>
<body>
<div class="container"></div>
<script>
sentinel.on('.container', function(newElem) {
console.log(newElem);
newElem.innerText = "This text was changed by Sentinel.js";
});
var newElement = document.createElement("div");
newElement.className = "target";
newElement.innerHTML = "This is a new element added to the page.";
document.querySelector(".container").appendChild(newElement);
console.log(newElement)
</script>
</body>
</html>uzairfarooq/arrive: Watch for DOM elements creation and removal <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>SentinelJS</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/arrive/2.4.1/arrive.min.js" integrity="sha512-wkU3qYWjenbM+t2cmvw2ADRRh4opbOYBjkhrPGHV7M6dcE/TR0oKpoDkWXfUs3HrulI2JFuTQyqPLRih1V54EQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<div class="container"></div>
<script>
document.querySelector(".container").arrive(".target", function(newElem) {
console.log(newElem);
newElem.innerText = "This text was changed by Arrive.js";
});
var newElement = document.createElement("div");
newElement.className = "target";
newElement.innerHTML = "This is a new element added to the page.";
document.querySelector(".container").appendChild(newElement);
console.log(newElement)
</script>
</body>
</html>They are quite helpful for this purpose: watch the DOM and do something when a target element is created. |
No description provided.