Currently, I am leveraging an ajax request to showcase a loop of Drupal posts.
$( document ).ready(function() {
$.ajax({
type:"GET",
url:"https://www.nba.com/api/1.1/json/?type=photo_gallery&tags=community&size=4",
success: function(data) {
let galleriesWrapper = document.getElementById("wrapper--community-galleries");
function create(tagName, props) {
return Object.assign(document.createElement(tagName), (props || {}));
}
function ac(p, c) {
if (c) p.appendChild(c);
return p;
}
for (var i=0; i< data.content.length; i++) {
var link = create("a", {
className: "wrapper--single-gallery",
href: data.content[i].url,
style: "background-image:url(" + data.content[i].images.large + ")"
});
var videoTitle = create("div", {
className: "single-gallery--title",
src: data.content[i].title
});
videoTitle.textContent = data.content[i].title;
ac(galleriesWrapper, ac(link, videoTitle));
}
},
dataType: "jsonp",
});
});
I am fetching the post's image from the .json file and incorporating it as the CSS background-image for that specific item within the loop.
The functionality performs flawlessly in Chrome and Firefox, however, encounters difficulties in IE.
A helper function called "create" is utilized, which employs Object.assign to efficiently generate and append DOM elements.
Initially, my challenge with IE arose due to the absence of an object.asign polyfill, resulting in no items being displayed.
Rectifying this Issue:
if (typeof Object.assign != 'function') {
Object.assign = function(target) {
'use strict';
if (target == null) {
throw new TypeError('Cannot convert undefined or null to object');
}
target = Object(target);
for (var index = 1; index < arguments.length; index++) {
var source = arguments[index];
if (source != null) {
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
}
return target;
};
}
After integrating this at the beginning of my JS script, the loop items are successfully displayed in IE, however, the code used to inject the background-image style inline fails (only displaying an item with the correct post title from the ajax request but with a blank background).
Update: The issue seems to be related to attempting to append the style property. When implementing the following:
var link = create("a", {
className: "wrapper--single-gallery",
href: data.content[i].url,
style: "background-image:url(" + data.content[i].images.large + ")"
});
The link is created with the class name and the href, yet the style property is not appended.
Suspecting it might be linked to how I inserted the URL from the JSON request data, I tried using just the style "color:red". This led to the same outcome of the style tag not being attached to the link.
Check out the JS FIDDLE EXAMPLE here: https://jsfiddle.net/nolaandy/w3gfawcg/