Saturday 29 June 2019

Javascript to load content in HTML sometimes unless element hovered inside inspect

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.

Before click/hover After Click/Hover

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