I have made a widget. The content of this is loaded dynamically by JS. However, sometimes when a page loads the data doesnt show up on the widget unless it is clicked upon. Even going into inspect and hovering over any element loads the items. The two images below are before and after click
Update - Click doesn't necessarily loads the data but hovering inside inspect element does.
Update 2 - This seem to get fixed if I call the function tp putdata multiple times. Note- I have 15 sec timer to call the function, however if I reduce the interval of first 4 runs, it fixes. However, this seems like a workaround and not a solution.
Here is the function that is putting the data
function putData(dataSet) {
if(dataSet.length == 3) {
document.getElementById('liveBlock').style.display = 'none';
document.getElementById('upcomingCompletedBlock').style.display = 'block';
for(var i=1; i<=3; i++) {
title = dataSet[i-1].title;
teams = title.split(' vs ');
homeTeamName = teams[0];
awayTeamName = teams[1];
homeTeam = dataSet[i-1].homeTeamLogoUrl;
awayTeam = dataSet[i-1].awayTeamLogoUrl;
document.getElementById('botCupLogo'+i+'1').src=homeTeam;
document.getElementById('botCupLogo'+i+'2').src=awayTeam;
document.getElementById('botCupName'+i+'1').innerHTML=homeTeamName;
document.getElementById('botCupName'+i+'2').innerHTML=awayTeamName;
if(dataSet[i-1].matchStatus == 'UPCOMING') {
var date = new Date(dataSet[i-1].startDateTime);
document.getElementById('summaryText'+i).innerHTML = date;
}
else if(dataSet[i-1].matchStatus == 'COMPLETED') {
document.getElementById('summaryText'+i).innerHTML = dataSet[i-1].summaryText;
}
}
}
It is called by a different function which fetches data from an API. The data is correctly fetched and passed into this function
from Javascript to load content in HTML sometimes unless element hovered inside inspect
No comments:
Post a Comment