Develop Reference

What's causing Intersection Observer API to respond differently when replacing synchronous logic with asynchronous logic?

Context
I've used the "Intersection Observer API" to build an infinite scroll image gallery. Basically this API allows me to load more items when a certain dummy DOM element enters the viewport.
Prototype
Currently the prototype is implemented for an “iPhone X” (375x812) mobile device only. See: http://urbexco-acceptance.droppages.com/min_rep_ex_working (use Chrome DevTools 'inspect' device toolbar to select the right resolution). The image gallery is generated based on 57 items in the "database". When scrolling down, first 15 elements are loaded, then 15 more elements are loaded, then another 15 elements are loaded into the DOM, then another 10 elements are loaded, and finally 2 elements are loaded. When there are still more than 15 items left to be loaded, they are added using the following logic:
function addItems(n){
// Append new items to .items-wrapper
var items = document.querySelector('.items-wrapper');
for (var i = 0; i < n; i++) {
var url = 'https://img01.ztat.net/article/spp-media-p1/09742e38c25b3e1d9716e02f8e76e87d/89fc0bda6a2c446a8e9e0d8adbc9a4fe.jpg';
width = 170.5;
height = 246;
var newDiv = document.createElement('div');
newDiv.classList.add('item');
items.appendChild(newDiv);
newDiv.innerHTML = "<img src=" + '"' + url + '"' + "width=" + '"' + width + '"' + "height=" + height + "/>";
}
}
Minimal Working Example (no mobile view possible)
https://jsfiddle.net/9jqgzymo/
Objective
Since image width and height are currently hardcoded, I am now trying to assign width and height dynamically based on the image url. I try to achieve this using the getMeta() function:
function addItems(n){
// Append new items to .items-wrapper
var items = document.querySelector('.items-wrapper');
for (var i = 0; i < n; i++) {
var url = 'https://img01.ztat.net/article/spp-media-p1/09742e38c25b3e1d9716e02f8e76e87d/89fc0bda6a2c446a8e9e0d8adbc9a4fe.jpg';
getMeta(url);
}
}
function getMeta(url){
var img = new Image();
img.onload = function(){
res = calculateAspectRatioFit(this.width, this.height, 170.5, 246)
var newDiv = document.createElement('div');
newDiv.classList.add('item');
var items = document.querySelector('.items-wrapper');
items.appendChild(newDiv);
newDiv.innerHTML = "<img src=" + '"' + url + '"' + "width=" + '"' + res.width + '"' + "height=" + res.height + "/>";
};
img.src = url;
}
function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) {
var ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);
return { width: srcWidth*ratio, height: srcHeight*ratio };
}
Challenge
When implementing it this way, I see that - on initiation - already 30 items from the "database" where added to the DOM. Sometimes even all of them? Currently the non-working prototype is implemented for an “iPhone X” (375x812) mobile device only. See: http://urbexco-acceptance.droppages.com/min_rep_ex_not_working (use Chrome DevTools 'inspect' device toolbar to select the right resolution). For a minimal working example, see: https://jsfiddle.net/k3p20qno/
Key question
What is the reason that with my new implementation, on initiation, already 30 or more items are added to the DOM? How can I fix it?

Well the problem lies in here :
function getMeta(url){
var img = new Image();
img.onload = function(){
res = calculateAspectRatioFit(this.width, this.height, 170.5, 246)
var newDiv = document.createElement('div');
newDiv.classList.add('item');
var items = document.querySelector('.items-wrapper');
items.appendChild(newDiv);
newDiv.innerHTML = "<img src=" + '"' + url + '"' + "width=" + '"' + res.width + '"' + "height=" + res.height + "/>";
};
img.src = url;
}
Above code does an async operation with onload event. So it doesn't wait to image to be loaded.
If you turn this into a function that returns a promise you will get the result that you expect. And you should await where you call the function. That way when you add the intersection element it will add it as the last element of the items wrapper. If you don't await it will be added as the first element because the loading of the images will be async and will happen later.
function getMeta(url){
var img = new Image();
const p = new Promise(resolve =>{
img.onload = function(){
console.log( this.width+' '+ this.height );
res = calculateAspectRatioFit(this.width, this.height, 170.5, 246)
var newDiv = document.createElement('div');
newDiv.classList.add('item');
var items = document.querySelector('.items-wrapper');
items.appendChild(newDiv);
newDiv.innerHTML = "<img src=" + '"' + url + '"' + "width=" + '"' + res.width + '"' + "height=" + res.height + "/>";
resolve()
};
})
img.src = url;
return p;
}
Fiddle
Edit: Put the resolve() in the right position which is inside the load function

Find the last element that has appeared DOM html

I have a code that puts images on a table(html), and I want to focus on the image that has just appeared.
I know that i have to use $(this) but i don't know how, here is my code
function positioning(year, mon) {
$('#' + year + ' .' + mon).prepend('<img class="black_point" src="./images/circle.png"/>');//that adds the image
var table = document.getElementById("table");
var images = table.getElementsByTagName("img");
//here I need the current image I had just add to send to that function
function connect(images) {
var tabBcr = table.getBoundingClientRect();
var imgBcr = image.getBoundingClientRect();
x = imgBcr.left + (imgBcr.width / 2) - tabBcr.left;
y = imgBcr.top + (imgBcr.height / 2) - tabBcr.top;
}
}
I hope I have explained well .

I think it will work, add this where you want to get that img element:
var imgelem=$('#' + year + ' .' + mon).find("img:first");

How can you insert a div into another created in javascript

So I'm trying to insert one div into another both created with Javascript
I have the following code,
// Assign tool attributes to Javascript Variables
var tool_name = String(tool['tool_name']);
tool_name = tool_name.replace(/'/g, '');
var tool_inventory_number = String(tool['tool_inventory_number']);
tool_inventory_number = tool_inventory_number.replace(/'/g, '');
var tool_recnum = String(tool['tool_recnum']);
tool_recnum = tool_recnum.replace(/'/g, '');
// Create the divs for the search results
var toolDiv = document.createElement("div");
var toolDivPicture = document.createElement("div");
//todo: Insert picture into this toolDivPicture div
var toolDivDescription = document.createElement("div");
toolDivDescription = toolDivDescription.innerHTML + "<h2>" + tool_name + "</h3>" + " <br>" + "Inventory Number: " + tool_inventory_number;
// Assign class to search result toolDiv and add content to it.
toolDiv.className = "toolDiv";
toolDiv.appendChild(toolDivDescription);
I keep getting the following error,
Uncaught NotFoundError: Failed to execute 'appendChild' on 'Node': The new child element is null.
Could this be because I have to refrence the child div by id? I really just want to have javascript create a div that contains two other divs and then insert it into the page. Any help/suggestions are appreciated!

Since you marked the question with the jQuery tag, I assume that you have the jQuery library loaded:
// Create the divs for the search results
var toolDiv = $("<div/>");
var toolDivPicture = $("<div/>");
var toolDivDescription = $("<div/>");
toolDivDescription.html("<h2>" + tool_name + "</h3>" + " <br>" + "Inventory Number: " + tool_inventory_number);
// Assign class to search result toolDiv and add content to it.
toolDiv.addClass("toolDiv");
toolDiv.append(toolDivDescription);
Note that you start a h2 but end a h3.
jsFiddle

Try this:
Wrap up your JavaScript in an onload function. So first add:
<body onload="loadJS()">
Then put your javascript in the load function, so:
function loadJS() {
// Assign tool attributes to Javascript Variables
var tool_name = String(tool['tool_name']);
tool_name = tool_name.replace(/'/g, '');
var tool_inventory_number = String(tool['tool_inventory_number']);
tool_inventory_number = tool_inventory_number.replace(/'/g, '');
var tool_recnum = String(tool['tool_recnum']);
tool_recnum = tool_recnum.replace(/'/g, '');
// Create the divs for the search results
var toolDiv = document.createElement("div");
var toolDivPicture = document.createElement("div");
//todo: Insert picture into this toolDivPicture div
var toolDivDescription = document.createElement("div");
toolDivDescription = toolDivDescription.innerHTML + "<h2>" + tool_name + "</h3>" + " <br>" + "Inventory Number: " + tool_inventory_number;
// Assign class to search result toolDiv and add content to it.
toolDiv.className = "toolDiv";
toolDiv.appendChild(toolDivDescription);
}

Error in Dynamics CRM Custom form Event Javascript

I am trying to make a button on a form in Dynamics CRM, so that onClick the button show a dialog. The JS code I am using is as follows:
function addButton(attributename) {
if (document.getElementById(attributename) != null) {
var sFieldID = "field" + attributename;
var elementID = document.getElementById(attributename + "_d");
var div = document.createElement("div");
div.style.width = "19%";
div.style.textAlign = "right";
div.style.display = "inline";
elementID.appendChild(div, elementID);
div.innerHTML = '<button id="' + sFieldID + '" type="button" style="margin-left: 4px; width: 100%;" ><img src="/_imgs/ico_16_4210.gif" border="0" alt="Dial this number"/></button>';
document.getElementById(attributename).style.width = "80%";
document.getElementById(sFieldID).onclick = function () {onbuttonclick(); };
}
}
function onbuttonclick() { alert('Hi');}
This function is written in a JS Web Resource which gets triggered with form onload event of contact entity. Whenever the form load event is triggered I get the following error in a dialog box:
There was an error with this field's customized event.
Field:window
Event:onload
Error:undefined
kindly guide me towards the resolution.
The code is taken from a sample example.

This simply means that you have an error somewhere in your JavaScript.
A much better solution would be to use a ribbon button, and have that ribbon button call javascript, instead of messing with the DOM (which is unsupported). drop the following code into your ribbondiffxml:
<Actions>
<JavaScriptFunction Library="$[js library name]" FunctionName="[js function name]" />
</Actions>
Specifically, this should go into the CommandDefinitionNode.
Here is an example of what I do to open a dialog via javascript:
Ribbon.openDialogProcess = function (dialogId, EntityName, objectId) {
var url = Xrm.Page.context.getClientUrl() +
"/cs/dialog/rundialog.aspx?DialogId=" +
dialogId + "&EntityName=" +
EntityName + "&ObjectId=" +
objectId;
var width = 400;
var height = 400;
var left = (screen.width - width) / 2;
var top = (screen.height - height) / 2;
window.open(url, '', 'location=0,menubar=1,resizable=0,width=' + width + ',height=' + height + ',top=' + top + ',left=' + left + '');
}
so simply call that method in the RibbonDiffXML.

onclick event not firing

var subjectList;
function PageMaster()
{
this.contentDiv = document.getElementById("content");
}
/**
* Builds the main part of the web page based on the given XML document object
*
* #param {Object} xmlDoc the given XML document object
*/
PageMaster.prototype.doIt = function(xmlDoc)
{
alert("PageMaster()");
alert("Clear page...");
this.contentDiv.innerHTML = "";
if (null != xmlDoc)
{
alert("Build page...");
//create div Post
var divPost = document.createElement("div");
divPost.className = "post";
//create h1 element
var h1Element = document.createElement("h1");
var headingText = document.createTextNode("Invitations");
h1Element.appendChild(headingText);
//insert h1 element into div post
divPost.appendChild(h1Element);
subjectList = xmlDoc.getElementsByTagName("subject");
var groupList = xmlDoc.getElementsByTagName("group");
for (var i = 0; i < subjectList.length; i++) //for each subject
{
var divEntry = document.createElement("div");
divEntry.className = "entry";
var subjectNum = subjectList[i].attributes[0].nodeValue;
var subjectName = subjectList[i].attributes[1].nodeValue;
var groupId = groupList[i].attributes[0].nodeValue;
var groupName = groupList[i].attributes[1].nodeValue;
var ownerId = groupList[i].attributes[2].nodeValue;
//set up the invitation table attributes
var table = document.createElement("table");
table.width = 411;
table.border = 3;
table.borderColor = "#990000"
tableRow = table.insertRow(0);
tableCell = tableRow.insertCell(0);
var cellContent = "";
//create invitation message
var invitationMsg = "<p>Subject : " + subjectNum + " - " + subjectName + "</p>";
invitationMsg += "<p>You are invited to join " + groupName + " (groupId : " + groupId + ") by owner Id:" + ownerId + "</p>";
cellContent += invitationMsg;
//create buttons
cellContent += "<input type='button' id='acceptButton" + i + "' value='Accept' onclick='acceptInvitation(i)'>"
cellContent += "<input type='button' id='declineButton" + i + "' value='Decline'>"
tableCell.innerHTML = cellContent;
divEntry.appendChild(table);
var blankSpace = document.createElement("p");
divEntry.appendChild(blankSpace);
divPost.appendChild(divEntry);
}
//insert div post into div content
this.contentDiv.appendChild(divPost);
}
};
function acceptInvitation(i)
{
alert("hello");
//alert(subjectList[i].attributes[0].nodeValue);
}
above is extract of my javascript code. What the code do is to create a table of inviting group from the xml file with accept and decline button. when user press accept, the table will disappear and the table below will move up. For now I am only testing my accept invitation button to see if it works.But
my onclick function in the accept button does not work for some reason I don't understand. the alert in acceptInvitation() is not read. Any help will be appreciated. Thanks

What about:
cellContent += "[...] onclick='acceptInvitation("+i+")'>"
This ensures that i is evaluated with the value of the variable instead of as a literal

Try to call it like this
onclick='acceptInvitation();'
Not like this
onclick='acceptInvitation(i)'

dont know if that's what's causing your problem but your outputting onclick='acceptInvitation(i)' Im guessing you want to output acceptInvitation(value-of-i), that is acceptInvitation(" + i + ")

while perhaps not addressing the central problem,
onclick='acceptInvitation(i)'
in this case i would be undefined.
onclick='acceptInvitation("+i+")'
would solve at least one problem. Also, you're using an unusual mixture of innerHTML and DOM methods. Why not stick to the DOM methods and use attachEvent/AddEventListener?
edit: A list apart has a good article on binding of variables at http://www.alistapart.com/articles/getoutbindingsituations/
The following is a somewhat specialized example. See the article for more generalized case (or use a library like Prototype)
var click_hdlr = function() {
return function() {
return acceptInvitation.apply(this,arguments);
}
}
var acc_btn = document.createElement("input");
acc_btn.setAttribute("type","button");
acc_btn.setAttribute("id","accept");
acc_btn.setAttribute("value","Accept");
acc_btn.addEventListener("click",click_hdlr(i),false);