Jump to content

Is it possible to apply emby-input/emby-select js magic to dynamically generated elements?


Recommended Posts

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 post
Share on other sites

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 by roaku
Link to post
Share on other sites

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 post
Share on other sites

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 post
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...