2. PHPRunner General questions
  3. [SOLVED] show a query result with a delay
This topic is locked
[SOLVED]

show a query result with a delay

 		11/5/2023 10:35:50 AM
PHPRunner General questions
francesco author

I want to show a query with a delay time after loading page, so I created this test snippet:

echo "<div id='newsContainer'>";
echo "<p id='firstQueryResult' style='display: none;'>Test
";
echo "</div>";

then in javascriptOnLoad event I put:

document.addEventListener("DOMContentLoaded", function() {
console.log("DOMContentLoaded triggered");
setTimeout(function() {
var firstQueryResult = document.getElementById('firstQueryResult');
if (firstQueryResult) {
console.log("Setting display to block");
firstQueryResult.style.display = 'block';
} else {
console.log("Elemento firstQueryResult non trovato");
}
}, 3000);
});

but it doesn't show anything. Do you have any suggest?
Admin 11/5/2023

I believe that you are overthinking things. Javascript OnLoad event is called after the whole page is loaded and "DOMContentLoaded" event handler may never get called. You need to simplify your code and start with bare minimum and improve on that.

francesco author 11/5/2023

Ok I just solved in this way:

$(document).ready(function() {
function loopFade() {
$('#firstQueryResult').fadeIn(1000, function() {
setTimeout(function() {
$('#firstQueryResult').fadeOut(1000, function() {
$('#secondQueryResult').fadeIn(1000, function() {
setTimeout(function() {
$('#secondQueryResult').fadeOut(1000, loopFade);
}, 3000);
});
});
}, 3000);
});
}
loopFade();
});

firstQueryResult, secondQueryResult .....are defined in code snippet. Now query results are displayed in a infinite loop with a nice effect