I am currently working on a webpage called DisplayItems.html that retrieves a list from another page named items.html. I have set it up to refresh its content every few seconds in case items.html is updated. However, I now want to implement a system where DisplayItems checks if the input has changed and only refreshes if necessary. How can I achieve this?
DisplayItems.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<link rel="stylesheet" type="text/css" href="Scroll.css">
<script src="jquery1.min.js"></script>
<script type="text/javascript" src="jquery.marquee.min.js"></script>
<script src="jquery-1.12.4.min.js"></script>
<script type="text/javascript">
var jQuery_1_12_4 = $.noConflict(true);
var currentData;
var oldData = jQuery_1_12_4('#text').load("items.html");
<!--
function Refresh() {
setTimeout("location.reload(true);");
}
window.setInterval(function CheckForChange(){
currentData = jQuery_1_12_4('#text').load("items.html");
if (currentData != oldData) {
currentData = oldData;
Refresh();
}
}, 5000);
// -->
</script>
</head>
<body onload="JavaScript:Refresh();">
<ul class='marquee' id="text">
</ul>
<script type="text/javascript">
jQuery_1_12_4('#text').load("items.html");
</script>
</body>
</html>
Items.html
<li>new item1</li>
<li>senario2</li>
<li>senario3</li>