In my app using Angular 4, I am trying to dynamically create an element and get its position on button click (Both actions happen in one button click). However, since the element is not created when accessing its position, the element returns null.
This is the method executed on click:
addNodeWithEdge(node){
this.addNewNode();
this.currentNode = this.nodeList.length-1;
var elementGenerated = document.getElementById(this.currentNode); //returns null
var to = this.getCentreOfElement(elementGenerated);
}
addNewNode() {
let newNode = new SntNode("", []);
this.nodeList.push(newNode);
}
getCentreOfElement(el) {
var xPos = el.offsetLeft + el.offsetWidth/2;
var yPos = el.offsetTop - el.offsetHeight/2;
return {
x: xPos,
y: yPos
};
}
And on the view:
<a (click)="addNewNode()"></a>
<ng-container *ngFor="let node of nodeList; index as n">
<div class="node-block" id={{n}}>
<div class="node-cmp" (click)="onSelectNode(n)">
<a class="a-tag-circle">{{node.name}}</a>
</div>
<div class="node-opts"></div>
</div>
</ng-container>
A node is added to nodeList when the addNewNode() is triggered. In the view, all nodes in the nodeList are added to the view in a for loop (*ngFor). This addition to the view is not executed until the function addNewNodeWithEdge() is fully executed. Since document.getElementById is executed before the view is refreshed, it returns null.
How do I solve this? Should I refresh the component after creating the element? If so how can I refresh component in Angular? Any help is much appreciated.
Here, in below given line you need to provide ID of element instead of index.
var elementGenerated = document.getElementById(this.secondNode); //returns null
I would like to use a javascript loop to create multiple HTML wrapper elements and insert JSON response API data into some of the elements (image, title, url, etc...).
Is this something I need to go line-by-line with?
<a class="scoreboard-video-outer-link" href="">
<div class="scoreboard-video--wrapper">
<div class="scoreboard-video--thumbnail">
<img src="http://via.placeholder.com/350x150">
</div>
<div class="scoreboard-video--info">
<div class="scoreboard-video--title">Pelicans # Bulls Postgame: E'Twaun Moore 10-8-17</div>
</div>
</div>
</a>
What I am trying:
var link = document.createElement('a');
document.getElementsByTagName("a")[0].setAttribute("class", "scoreboard-video-outer-link");
document.getElementsByTagName("a")[0].setAttribute("url", "google.com");
mainWrapper.appendChild(link);
var videoWrapper= document.createElement('div');
document.getElementsByTagName("div")[0].setAttribute("class", "scoreboard-video-outer-link");
link.appendChild(videoWrapper);
var videoThumbnailWrapper = document.createElement('div');
document.getElementsByTagName("div")[0].setAttribute("class", "scoreboard-video--thumbnail");
videoWrapper.appendChild(videoThumbnailWrapper);
var videoImage = document.createElement('img');
document.getElementsByTagName("img")[0].setAttribute("src", "url-of-image-from-api");
videoThumbnailWrapper.appendChild(videoImage);
Then I basically repeat that process for all nested HTML elements.
Create A-tag
Create class and href attributes for A-tag
Append class name and url to attributes
Append A-tag to main wrapper
Create DIV
Create class attributes for DIV
Append DIV to newly appended A-tag
I'd greatly appreciate it if you could enlighten me on the best way to do what I'm trying to explain here? Seems like it would get very messy.
Here's my answer. It's notated. In order to see the effects in the snippet you'll have to go into your developers console to either inspect the wrapper element or look at your developers console log.
We basically create some helper methods to easily create elements and append them to the DOM - it's really not as hard as it seems. This should also leave you in an easy place to append JSON retrieved Objects as properties to your elements!
Here's a Basic Version to give you the gist of what's happening and how to use it
//create element function
function create(tagName, props) {
return Object.assign(document.createElement(tagName), (props || {}));
}
//append child function
function ac(p, c) {
if (c) p.appendChild(c);
return p;
}
//example:
//get wrapper div
let mainWrapper = document.getElementById("mainWrapper");
//create link and div
let link = create("a", { href:"google.com" });
let div = create("div", { id: "myDiv" });
//add link as a child to div, add the result to mainWrapper
ac(mainWrapper, ac(div, link));
//create element function
function create(tagName, props) {
return Object.assign(document.createElement(tagName), (props || {}));
}
//append child function
function ac(p, c) {
if (c) p.appendChild(c);
return p;
}
//example:
//get wrapper div
let mainWrapper = document.getElementById("mainWrapper");
//create link and div
let link = create("a", { href:"google.com", textContent: "this text is a Link in the div" });
let div = create("div", { id: "myDiv", textContent: "this text is in the div! " });
//add link as a child to div, add the result to mainWrapper
ac(mainWrapper, ac(div, link));
div {
border: 3px solid black;
padding: 5px;
}
<div id="mainWrapper"></div>
Here is how to do specifically what you asked with more thoroughly notated code.
//get main wrapper
let mainWrapper = document.getElementById("mainWrapper");
//make a function to easily create elements
//function takes a tagName and an optional object for property values
//using Object.assign we can make tailored elements quickly.
function create(tagName, props) {
return Object.assign(document.createElement(tagName), (props || {}));
}
//document.appendChild is great except
//it doesn't offer easy stackability
//The reason for this is that it always returns the appended child element
//we create a function that appends from Parent to Child
//and returns the compiled element(The Parent).
//Since we are ALWAYS returning the parent(regardles of if the child is specified)
//we can recursively call this function to great effect
//(you'll see this further down)
function ac(p, c) {
if (c) p.appendChild(c);
return p;
}
//these are the elements you wanted to append
//notice how easy it is to make them!
//FYI when adding classes directly to an HTMLElement
//the property to assign a value to is className -- NOT class
//this is a common mistake, so no big deal!
var link = create("a", {
className: "scoreboard-video-outer-link",
url: "google.com"
});
var videoWrapper = create("div", {
className: "scoreboard-video-outer-link"
});
var videoThumbnailWrapper = create("div", {
className: "scoreboard-video--thumbnail"
});
var videoImage = create("img", {
src: "url-of-image-from-api"
});
//here's where the recursion comes in:
ac(mainWrapper, ac(link, ac(videoWrapper, ac(videoThumbnailWrapper, videoImage))));
//keep in mind that it might be easiest to read the ac functions backwards
//the logic is this:
//Append videoImage to videoThumbnailWrapper
//Append (videoImage+videoThumbnailWrapper) to videoWrapper
//Append (videoWrapper+videoImage+videoThumbnailWrapper) to link
//Append (link+videoWrapper+videoImage+videoThumbnailWrapper) to mainWrapper
let mainWrapper = document.getElementById('mainWrapper');
function create(tagName, props) {
return Object.assign(document.createElement(tagName), (props || {}));
}
function ac(p, c) {
if (c) p.appendChild(c);
return p;
}
var link = create("a", {
className: "scoreboard-video-outer-link",
url: "google.com"
});
var videoWrapper = create("div", {
className: "scoreboard-video-outer-link"
});
var videoThumbnailWrapper = create("div", {
className: "scoreboard-video--thumbnail"
});
var videoImage = create("img", {
src: "url-of-image-from-api"
});
ac(mainWrapper, ac(link, ac(videoWrapper, ac(videoThumbnailWrapper, videoImage))));
//pretty fancy.
//This is just to show the output in the log,
//feel free to just open up the developer console and look at the mainWrapper element.
console.dir(mainWrapper);
<div id="mainWrapper"></div>
Short version
Markup.js's loops.
Long version
You will find many solutions that work for this problem. But that may not be the point. The point is: is it right? And you may using the wrong tool for the problem.
I've worked with code that did similar things. I did not write it, but I had to work with it. You'll find that code like that quickly becomes very difficult to manage. You may think: "Oh, but I know what it's supposed to do. Once it's done, I won't change it."
Code falls into two categories:
Code you stop using and you therefore don't need to change.
Code you keep using and therefore that you will need to change.
So, "does it work?" is not the right question. There are many questions, but some of them are: "Will I be able to maintain this? Is it easy to read? If I change one part, does it only change the part I need to change or does it also change something else I don't mean to change?"
What I'm getting at here is that you should use a templating library. There are many for JavaScript.
In general, you should use a whole JavaScript application framework. There are three main ones nowadays:
ReactJS
Vue.js
Angular 2
For the sake of honesty, note I don't follow my own advice and still use Angular. (The original, not Angular 2.) But this is a steep learning curve. There are a lot of libraries that also include templating abilities.
But you've obviously got a whole project already set up and you want to just plug in a template into existing JavaScript code. You probably want a template language that does its thing and stays out of the way. When I started, I wanted that too. I used Markup.js . It's small, it's simple and it does what you want in this post.
https://github.com/adammark/Markup.js/
It's a first step. I think its loops feature are what you need. Start with that and work your way to a full framework in time.
Take a look at this - [underscore._template]
It is very tiny, and useful in this situation.
(https://www.npmjs.com/package/underscore.template).
const targetElement = document.querySelector('#target')
// Define your template
const template = UnderscoreTemplate(
'<a class="<%- link.className %>" href="<%- link.url %>">\
<div class="<%- wrapper.className %>">\
<div class="<%- thumbnail.className %>">\
<img src="<%- thumbnail.image %>">\
</div>\
<div class="<%- info.className %>">\
<div class="<%- info.title.className %>"><%- info.title.text %></div>\
</div>\
</div>\
</a>');
// Define values for template
const obj = {
link: {
className: 'scoreboard-video-outer-link',
url: '#someurl'
},
wrapper: {
className: 'scoreboard-video--wrapper'
},
thumbnail: {
className: 'scoreboard-video--thumbnail',
image: 'http://via.placeholder.com/350x150'
},
info: {
className: 'scoreboard-video--info',
title: {
className: 'scoreboard-video--title',
text: 'Pelicans # Bulls Postgame: E`Twaun Moore 10-8-17'
}
}
};
// Build template, and set innerHTML to output element.
targetElement.innerHTML = template(obj)
// And of course you can go into forEach loop here like
const arr = [obj, obj, obj]; // Create array from our object
arr.forEach(item => targetElement.innerHTML += template(item))
<script src="https://unpkg.com/underscore.template#0.1.7/dist/underscore.template.js"></script>
<div id="target">qq</div>
I'm new in React, but I have some experience in JS.
My question is:
I have a function and I put this functions to onMouseOver event to element
<td> in current situation.
I want to get this current dom element and get index of this element next.
My code is bellow:
var Cell = function(k) {
function getIndex(cell){
console.log(cell)
}
return (
<td key ={k} onMouseOver={function() {getIndex(this)}}>
<div className="square__cell" ></div>
</td>
)
}
In js it works something like this. But now in React it returns me null.
If I put in console.log "1" for example it also works. So function is woks and I have only problem to get information about current element
Please help to find out how to do it.
Thanks.
You have to bind the function instead of creating new function so the context scope of component remains same
var Cell = function(k) {
function getIndex(cell){
console.log(cell)
}
return (
<td key ={k} onMouseOver={this.getIndex.bind(this,k)}}>
<div className="square__cell" ></div>
</td>
)
}
I try to sort the data after user drop an element on target container, here is the sorting event
......
var elements_container= dojo.dnd.Source("elements_container");
dojo.byId("elements_container").innerHTML = '';
... // add elements into container...
function sortDnD(){
// actually full class name is ".element dojoDndItem" to query
dojo.query(".element", dojo.byId("elements_container")).sort(
function( a,b ) {
// fire bug debugging cursor skip this section
var divs_a = dojo.query('> div.sequence', a)
var diValue_a = divs_a[0].innerHTML;
var divs_b = dojo.query('> div.sequence', b)
var diValue_b = divs_b[0].innerHTML;
return (divs_a == divs_b ? 0 : (a.divs_a > b.divs_b ? 1 : -1));
}
).forEach(// fire bug debugging cursor move to this section
function(a, idx) {
dojo.byId("element_container").insertBefore(a, dojo.byId("elements_container").childNodes[idx]);
});
}
dojo.byId("elements_container") is the dojo dnd source. I can guarantee that there are several elements in the containers...
I am using dojo1.6, interestingly when I debug by firebug, it looks the body inside of
function( a,b ) {
....
}
never executed, nor get any error message; the debug cursor move to .forEach just after function( a,b ) but the body of .forEach method runs without any problem. It looks the sort function give no response at all.
UPDATE
here is the code to invoke above sorting function
dojo.connect( source_container, "onDndDrop", function( source, nodes, copy, target ) {
nodes.forEach(function(node) {
sortDnD();
});
});
UPDATE2
After I change
dojo.query(".element", dojo.byId("elements_container")).sort(
to
dojo.query(".element", elements_container).sort(
Dojo gives:
TypeError: root.getElementsByClassName is not a function
...ag){var ret=_201(0,arr),te,x=0;var tret=root.getElementsByClassName(_235);while(...
and here is the dom data for elements_container
node: div#elements_container.container.dnd-list.dojoDndContainer.dojoDndSource.dojoDndTarget
childrenNodes: NodeList[div#dojoUnique23.element.dojoDndItem, div#dojoUnique24.element.dojoDndItem, .....
The reason why the callback in the sort is not being called is because your query selector returns an empty array (therefore you have nothing to sort on).
Use the following instead :
dojo.query(".element.dojoDndItem", "elements_container").sort(
Note that initially your selector was ".element .dojoDndItem" which means "find all nodes with class dojoDndItem that are children of nodes with class element". Here, both classes are in the same nodes, so you need to remove the space and make the selector be ".element.dojoDndItem".
I'm trying to implement a form where I can delete specific inputs using React. The problem is, react doesn't seem to be rendering the information correctly. This is my render function:
render: function(){
var inputItems;
if (this.state.inputs){
inputItems = this.state.inputs.map(function(input){
console.log(input)
return (
<Input
input={input}
onDestroy={this.destroy.bind(this, input)}
onEdit={this.edit.bind(this, input)}
editing={this.state.editing === input.id}
onCancel={this.cancel} />
);
}, this);
}
(...)
// this isn't the actual render return
return {inputItems}
and my destroy function:
destroy: function (input) {
var newInputs = this.state.inputs.filter(function (candidate) {
return candidate.id !== input.id;
});
this.setState({
inputs: newInputs
});
},
The actual destroy function is getting called through a child component via <a href="#" onClick={this.props.onDestroy}>(Remove)</a>. The interesting thing is that when I console log my inputs, as seen in the render function, the correct inputs are shown - the one I called the destroy function on is gone. But the incorrect inputs are rendered - it's always the very last one that disappears, not the one I called the destroy function on. So for example, I'll initially log:
First Name
Last Name
Email
and call the destroy function on the Last Name. The console.log will show:
First Name
Email
but the actual rendered information will show:
First Name
Last Name
Thanks!
Figured it out. Has to do with React child reconciliation. Added a key={input.id} to the <Input> tag and it works.
More information here under child reconciliation and dynamic children.
http://facebook.github.io/react/docs/multiple-components.html