roaku 795 Posted January 11, 2021 Share Posted January 11, 2021 I'm never sure whether to post these kinds of questions here or in the Plugin section... Anyway, I've got a plugin configuration section where a user can add n number of rows and am adding each row through javascript. For my form elements that exist when the page loads, emby-input and the like automagically convert the label attribute to a real label and add eventListeners, keypress events and whatever else. This doesn't happen for the dynamically appended elements, even though they have identical html structures. Is there a way to re-run the initializer for these dynamic elements, or do I need to take a different approach (the api key modal seems like another way to go about what I'm doing). Thanks. Link to comment Share on other sites More sharing options...
roaku 795 Posted January 11, 2021 Author Share Posted January 11, 2021 (edited) An excerpt of my javascript: var loadRules = function (rules) { const rulesWrapper = page.querySelector("#rulesWrapper"); rules.forEach(function (rule, index) { const propertyRuleValueContainer = createRuleElement("inputContainer", "What value should this MediaStream property contain?", "Property Value:", createInputElement("propertyValue"+index, ["emby-input"], "Property Value:")); rulesWrapper.appendChild(propertyRuleValueContainer); }); }; Delivers this html: <div class="inputContainer"> <div class="flex align-items-center"> <div class="flex-grow"> <input id="propertyValue0" label="Property Value:" is="emby-select" autocomplete="off" class="emby-input" type="text"> </div> </div> <div class="fieldDescription">What value should this MediaStream property contain?</div> </div> Edited January 11, 2021 by roaku Link to comment Share on other sites More sharing options...
roaku 795 Posted January 12, 2021 Author Share Posted January 12, 2021 One solution appears to be just working with strings instead of javascript elements and adding them to the desired dom element with insertAdjacentHTML This seems to get picked up properly by EmbyInput: var createRuleElement = function(classNames, fieldDescriptionText, labelText, inputElement) { return '<div class="'+classNames+'"><div class="flex"><div class="flex-grow">'+inputElement+'</div></div><div class="fieldDescription">'+fieldDescriptionText+'</div>'; }; var createInputElement = function(id, classNames, labelText) { return '<input is="'+classNames+'" id="'+id+'" label="'+labelText+'" autocomplete="off" />'; }; const propertyRuleValueContainer = createRuleElement("inputContainer", "What value should this MediaStream property contain?", "Property Value:", createInputElement("propertyValue"+index, "emby-input", "Property Value:")); page.querySelector("#rulesWrapper").insertAdjacentHTML("beforeend", propertyRuleValueContainer); apikeys.js ended up being the key for me in more ways than one Link to comment Share on other sites More sharing options...
roaku 795 Posted January 12, 2021 Author Share Posted January 12, 2021 I haven't gotten a chance to test it yet, but 'ownerDocument' looks like it might be the way to do it if you want to work with javascript elements the way I was originally trying to do: page.querySelector("#rulesWrapper").ownerDocument.createElement("div") Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now