Is there a way to locate a node with a dynamic id value using Polymer's method of finding nodes by id?
For instance
<template>
<div id="{{ id }}"></div>
</template>
and in JavaScript
Polymer("my-element", {
ready: function() {
if (!this.id) {
this.id = 'id' + (new Date()).getTime();
}
console.log(this.$.id); // Here is where I need to locate my div element
}
});
Did you know that a JavaScript hash can be accessed using either dot notation or array notation? When dealing with a literal name, you can use dot notation like this: this.$.some_id. However, if there is an indirection involved, such as setting this.id = 'some_id', then array notation is needed to find the value: this.$[this.id].
One thing to keep in mind is that Polymer populates the $ array only after stamping the template, which occurs before the ready event. If you have an external binding to this.id, accessing it through this.$.[this.id] might not work as expected because by the time ready is triggered, it's too late for the $ convenience.
In such situations, it's recommended to query the shadowRoot directly like this:
this.shadowRoot.querySelector('#' + this.id)A helpful tip is to install a named div that can be easily queried against, especially if a subclass introduces a new template where this.shadowRoot points to the updated version. For example, you can use:
this.$.id_div.querySelector('#' + this.id')Utilize the symbol $ as a hash:
identifier = 'dynamic_element_id';
this.$[identifier];
When it comes to finding dynamically-created nodes within your element's local DOM, Polymer offers a useful method as detailed in this source:
To locate such nodes, you can utilize the $$ method:
this.$$(selector)The
$$function will return the first node in the local DOM that matches the provided selector.
If you apply this example to your situation, it should yield results:
console.log(this.$$('#' + id));
As stated in this resource, Polymer 2.x does not support the use of
$$, so it is recommended to utilizethis.shadowRoot.querySelectorinstead.
console.log(this.shadowRoot.querySelector('#' + id));
For those working with Polymer 1.x, you can still make use of $$.
I am attempting to utilize Puppeteer for iterating through a table element's rows. Each row in the table contains a dropdown menu within the last column. My goal is to select option "P" for Parameters, retrieve all href links, build an array of those ...
I'm encountering an error when trying to run this query, and I'm not sure why it's returning a bad request. My goal is to fetch a specific user from the database using the accountId. Can someone assist me with this issue? Below is the funct ...
After installing brunch on my Windows machine using npm (npm install brunch), I proceeded to create and build a new project in my www root directory (specifically, the Apache www root). cd .../www brunch new someproject cd someproject brunch build Upon e ...
Given the following code snippet: const [searchParams, setSearchParams] = useSearchParams(); console.log(searchParams.toString()); console.log(typeof searchParams); console.log(Object.values(searchParams)); When a URL like http://localhost:3000/c ...
Can anyone please explain how I can access a component variable within a foreach loop? Check out my code on Plunker public exampleVariable:number; test(){ console.log('fired'); var x =[1,2,3,4]; x.forEach(function (e){ th ...
Is it possible to pass multiple variables from two different windows into the same PHP script? If not, what would be the best approach to take? Thank you. verifyemail.html <script type = "text/javascript" src = "js/js_functions.js"></script> ...
In my application, I have a settings modal that contains tabs which act as links to different paths. When the user clicks on the background outside of the modal, it triggers the history.goBack function. However, I noticed that if the user has already click ...
Here is a common function I have for sorting: export const sortSelectOptions = (options, sortByKey = 'name', type) => { switch (type) { case 'alphaNumeric': return options .slice() .sort((a, b) => ...
I'm encountering an issue while trying to access process.env.NODE_ENV within my application. Whenever I check it, I only receive the error message process is not defined. package.json: "scripts": { "dev": "node ./node_mod ...
My goal is to enable column sorting on cell data that includes custom HTML elements. I understand that I might need to create a custom function to override the default sorting behavior and refer it to the raw values instead of the rendered HTML output. De ...
Recently, I've been working on a JS project inspired by a short story from my high school days. The story featured robot crabs living on a small island, and I wanted to create a simulator where players could set the initial parameters and watch as the ...
Utilizing the axios library, I am pulling data from a website. Unfortunately, the data being fetched is in HTML format. The extracted data looks like this: 1 Agartala VEAT 120830Z 23004KT 5000 HZ SCT018 SCT025 34/27 Q1004 NOSIG= 2 Ahmedabad VAAH 120830Z 23 ...
Exploring the realm of theoretical programming rather than practical applications, my focus has turned towards closures in JavaScript. In essence, a closure is a function with its own exclusive set of variables that are not accessible to copies of the func ...
When attempting to save an array in localStorage, the values associated with String keys seem to disappear. Here's an example: var myArray = []; myArray["key1"] = "value1"; myArray[123] = "value2"; Initially, everything seems to work fine and the ...
Currently, I have a situation where my iframe is positioned over the entire HTML document. However, I am in need of finding a way to pass clicks and hover events from the iframe back to the main hosting document. Are there any potential solutions or alter ...
Whenever I try to use a simple form that displays items with radio buttons, everything works fine except for one issue. The 'item.chosen' value always shows up as undefined when I attempt to retrieve it in the selectRadioButton function. Can some ...
<form action=""> <input id="user_input" onKeyDown="if(event.keyCode == 13)document.getElementById('okButton').click()" > <input id="okButton" type="button" onclick="JS_function();" value="OK"> </form> I'm trying to a ...
Is there a better way to write multiple queries in succession? For example: Space.findOne({ _id: id }, function(err, space) { User.findOne({ user_id: userid }, function(err, user) { res.json({ space: space, user: user}); }); }); It can g ...
My goal is to utilize Signals (@preact/signals-react) in order to minimize re-rendering when dealing with large data objects. Specifically, I am fetching objects from a network request that tend to change frequently due to live updates. For direct propert ...
Currently, I am in the process of incorporating a basic chat feature into my web application using AngularJs 1.4.5 and pubnub. To do this, I am following the instructions outlined in the pubnub tutorial. $scope.channel = 'chat_for_trial'; $scop ...