I am seeking help with my JavaScript script to make it expandable when a new item (video) is added to my SharePoint folder. I created a counter that counts each time the video button is selected and displays the new count inside a div. The script works as expected but I like to expand its capability to automatically adjust when a new video is added into the SharePoint video folder. The video is dynamically added to an HTML page when dropped into the folder. However, when I add a new video its loads into the zero-index position and move the others video down one; making the previous video in the zero-index position to the one position and so on. Can someone view my script and see; if possible, how I can make my current script adjust accordingly when the new video is loaded? I like to make it where I do not have to go back into script and renumber everything by hand when a new video is added. I hope this question make sense.
jQuery(document).on("click", "#column5", function() {
videoHits();
getFilesFromFolder("/sites/dcsa/ep/epMainFiles/BI/video").done(function(data) {
$.each(data.d.results, function(i, item) {
var spDate = new Date(item.TimeCreated.split('T')[0]) //example: '2015-10-30T05:00:00Z'
var newTillDate = new Date();
spDate.setDate(spDate.getDate() + 2);
if (spDate <= newTillDate) {
jQuery("#hiddenWrapper").fadeIn();
$("#column1 ol").append('<li style="width:30%; height: auto; position: relative; left: 5%; padding-right: 10px; padding-bottom: 10px; text-align: center; font-size: 12px; float: left;" data-event-date="' + item.TimeCreated.split("T")[0] + '"><div class="btnImg" id="growPlayPauseBtn' + i + '" style="width: 285px; height: 225px; position: absolute; top: 20px; z-index: 10; cursor: pointer; padding: 10px; color: white; background-color: rgba(43, 92, 171, .35); display: block;">Play Video</div><video width="100%" height="auto" controls onended="videoEnded1()" id="videoClip' + i + '"><source src="' + item.ServerRelativeUrl + '" type="audio/mpeg" >' + item.Name.replace(/\.[^/.]+$/, "") + " - " + '<span style="color: red;">' + item.TimeCreated.split('T')[0] + '</span>' + '</video><span style="text-align: center; font-size: 12px; float: left; clear: both;" "' + item.TimeCreated.split("T")[0] + '">' + item.Name.replace(/\.[^/.]+$/, "") + " - " + item.TimeCreated.split('T')[0] + '</span></br><div class="vidViews" id="vidHit' + i + '">Views: <span></span></div></li>');
$("#column1 h3").html("Videos");
} else {
jQuery("#hiddenWrapper").fadeIn();
$("#column1 ol").append('<li style="width:30%; height: auto; position: relative; left: 5%; padding-right: 10px; padding-bottom: 10px; text-align: center; font-size: 12px; float: left;" data-event-date="' + item.TimeCreated.split("T")[0] + '"><div class="btnImg" id="growPlayPauseBtn' + i + '" style="width: 285px; height: 225px; position: absolute; top: 20px; z-index: 10; cursor: pointer; padding: 10px; color: white; background-color: rgba(43, 92, 171, .35); display: block;">Play Video</div><video width="100%" height="auto" controls onended="videoEnded1()" id="videoClip' + i + '"><source src="' + item.ServerRelativeUrl + '" type="audio/mpeg" >' + item.Name.replace(/\.[^/.]+$/, "") + " - " + '<span style="color: red;">' + item.TimeCreated.split('T')[0] + '</span>' + '</video><span style="text-align: center; font-size: 12px; float: left; clear: both;" "' + item.TimeCreated.split("T")[0] + '">' + item.Name.replace(/\.[^/.]+$/, "") + " - " + item.TimeCreated.split('T')[0] + '</span></br><div class="vidViews" id="vidHit' + i + '">Views: <span></span></div></li>');
$("#column1 h3").html('<img class="newArrow" style="width: 60px; position: relative; right: 5px; top: 0px;"src="../SiteAssets/SitePages/Test Page/icons/arrow-with_new2.gif" alt="logo">Videos');
}
});
});
});
///Read hits from growVideoHits List
function videoHits() {
jQuery(document).ready(function() {
var chartData = getListData("growVideoHits"); //vidHit
var data = [];
for (var i = 0; i < chartData.length; i++) {
data.push({
"label": chartData[i].Title
});
}
initChart(data);
});
function initChart(chartData) {
//console.log(chartData);
//Filter List Column for Specific Column Item
var view0 = chartData.filter(function(d) {
if (d["label"] == "Test Video") {
return d;
}
})
var view1 = chartData.filter(function(d) {
if (d["label"] == "GROW HHM Guest Speaker") {
return d;
}
})
var view2 = chartData.filter(function(d) {
if (d["label"] == "GROW Meeting 26 Aug 2020") {
return d;
}
})
var pageCount0 = view0.length;
var pageCount1 = view1.length;
var pageCount2 = view2.length;
d3.select('#vidHit0 span').html(pageCount0);
d3.select('#vidHit1 span').html(pageCount1);
d3.select('#vidHit2 span').html(pageCount2);
} //End of D3 function For Column Chart
function getListData(listName) {
var results;
var requestUri = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('" + listName + "')/items?$select=Title";
$.ajax({
url: requestUri,
type: "GET",
async: false,
headers: {
"ACCEPT": "application/json;odata=verbose"
},
success: function(data) {
results = data.d.results;
},
error: function() {
//alert("Failed to get details");
}
});
return results;
}
}
////Play Buttons
jQuery(document).on("click", '[id^=growPlayPauseBtn]', function(e) {
growBtn_Event(e);
});
function growBtn_Event(e) {
if ($(e.target).attr("id") == 'growPlayPauseBtn0') {
//alert('0');
var title = "Test Video";
AddListItem(title);
videoClip0.play();
jQuery("#growPlayPauseBtn0").html("Pause");
jQuery("#growPlayPauseBtn0").fadeOut();
}
if ($(e.target).attr("id") == 'growPlayPauseBtn1') {
//alert('1');
var title = "GROW HHM Guest Speaker";
AddListItem(title);
videoClip1.play();
jQuery("#growPlayPauseBtn1").html("Pause");
jQuery("#growPlayPauseBtn1").fadeOut();
}
if ($(e.target).attr("id") == 'growPlayPauseBtn2') {
/// alert('2');
var title = "GROW Meeting 26 Aug 2020";
AddListItem(title);
videoClip2.play();
jQuery("#growPlayPauseBtn2").html("Pause");
jQuery("#growPlayPauseBtn2").fadeOut();
}
}
function AddListItem(TitleField) {
$().SPServices({
operation: "UpdateListItems",
async: false,
batchCmd: "New",
listName: "growVideoHits", //vidHit
valuepairs: [
["Title", TitleField]
],
completefunc: function(xData, Status) {
//alert("Data Saved! and Please check your List");
}
});
}
How I add content to the HTML: I use the REST API get option to detect a new item loaded into the SharePoint folder.
getFilesFromFolder("/sites/dcsa/ep/epMainFilesBI/video").done(function(data){
Then I concatenate the items from the folder onto the HTML page with the below script:
$("#column1 ol").append('<li style="width:30%; height: auto; position: relative; left: 5%; padding-right: 10px; padding-bottom: 10px; text-align: center; font-size: 12px; float: left;" data-event-date="' + item.TimeCreated.split("T")[0] + '"><div class="btnImg" id="growPlayPauseBtn'+ i +'" style="width: 285px; height: 225px; position: absolute; top: 20px; z-index: 10; cursor: pointer; padding: 10px; color: white; background-color: rgba(43, 92, 171, .35); display: block;">Play Video</div><video width="100%" height="auto" controls onended="videoEnded1()" id="videoClip'+ i +'"><source src="' + item.ServerRelativeUrl + '" type="audio/mpeg" >' + item.Name.replace(/\.[^/.]+$/, "") + " - " + '<span style="color: red;">' + item.TimeCreated.split('T')[0] + '</span>' + '</video><span style="text-align: center; font-size: 12px; float: left; clear: both;" "' + item.TimeCreated.split("T")[0] + '">' + item.Name.replace(/\.[^/.]+$/, "") + " - " + item.TimeCreated.split('T')[0] + '</span></br><div class="vidViews" id="vidHit'+ i +'">Views: <span></span></div></li>');
if i have well understood your code, the new item are created in the else part so i suggest you to do a first loop to detect old videos from new videos and create html after:
getFilesFromFolder("/sites/dcsa/ep/epMainFiles/BI/video").done(function(data) {
$.each(data.d.results, function(index, item) {
var spDate = new Date(item.TimeCreated.split('T')[0]) //example: '2015-10-30T05:00:00Z'
var newTillDate = new Date();
spDate.setDate(spDate.getDate() + 2);
var newitems = [], olditems= [];
if (spDate <= newTillDate) {
olditems.push(item);
} else {
newitems.push(item);
}
var nbrolditems = olditems.length;
for(let i = 0;i < nbrolditems; i++){
let item = olditem[i];
jQuery("#hiddenWrapper").fadeIn();
$("#column1 ol").append('<li style="width:30%; height: auto; position: relative; left: 5%; padding-right: 10px; padding-bottom: 10px; text-align: center; font-size: 12px; float: left;" data-event-date="' + item.TimeCreated.split("T")[0] + '"><div class="btnImg" id="growPlayPauseBtn' + i + '" style="width: 285px; height: 225px; position: absolute; top: 20px; z-index: 10; cursor: pointer; padding: 10px; color: white; background-color: rgba(43, 92, 171, .35); display: block;">Play Video</div><video width="100%" height="auto" controls onended="videoEnded1()" id="videoClip' + i + '"><source src="' + item.ServerRelativeUrl + '" type="audio/mpeg" >' + item.Name.replace(/\.[^/.]+$/, "") + " - " + '<span style="color: red;">' + item.TimeCreated.split('T')[0] + '</span>' + '</video><span style="text-align: center; font-size: 12px; float: left; clear: both;" "' + item.TimeCreated.split("T")[0] + '">' + item.Name.replace(/\.[^/.]+$/, "") + " - " + item.TimeCreated.split('T')[0] + '</span></br><div class="vidViews" id="vidHit' + i + '">Views: <span></span></div></li>');
$("#column1 h3").html("Videos");
}
for(let j = 0;j < newitems.length; j++){
let item = olditem[j;
let i = j + nbrolditems;
jQuery("#hiddenWrapper").fadeIn();
$("#column1 ol").append('<li style="width:30%; height: auto; position: relative; left: 5%; padding-right: 10px; padding-bottom: 10px; text-align: center; font-size: 12px; float: left;" data-event-date="' + item.TimeCreated.split("T")[0] + '"><div class="btnImg" id="growPlayPauseBtn' + i + '" style="width: 285px; height: 225px; position: absolute; top: 20px; z-index: 10; cursor: pointer; padding: 10px; color: white; background-color: rgba(43, 92, 171, .35); display: block;">Play Video</div><video width="100%" height="auto" controls onended="videoEnded1()" id="videoClip' + i + '"><source src="' + item.ServerRelativeUrl + '" type="audio/mpeg" >' + item.Name.replace(/\.[^/.]+$/, "") + " - " + '<span style="color: red;">' + item.TimeCreated.split('T')[0] + '</span>' + '</video><span style="text-align: center; font-size: 12px; float: left; clear: both;" "' + item.TimeCreated.split("T")[0] + '">' + item.Name.replace(/\.[^/.]+$/, "") + " - " + item.TimeCreated.split('T')[0] + '</span></br><div class="vidViews" id="vidHit' + i + '">Views: <span></span></div></li>');
$("#column1 h3").html('<img class="newArrow" style="width: 60px; position: relative; right: 5px; top: 0px;"src="../SiteAssets/SitePages/Test Page/icons/arrow-with_new2.gif" alt="logo">Videos');
}
});
});
Another idea is to sort the list by date of creation of video....