I can't update my label with Jquery. It should update after every second on my page but nothing happens. Is there something wrong with my javascript?
Basically what I want to do is update the label every second. But somehow this isn't working. Can anyone please help me out?
Below you can find the code for my 2 files:
////////////// Index.html: /////////////////
<!--AWP_IN_Variable Name='"webdata".AmountOfErrors' -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Gebr. Gerrits Recycling Helmond</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/default.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/highcharts.js"></script>
</head>
<body>
<div class="Maindiv">
<div class="header">
<img src="images/gerritslogo800.jpg" class="Logo">
</div>
<div class="content">
<br/>
<table>
<tr>
<th>Part</th>
<th>Value</th>
</tr>
<tr>
<td>Ferro:</td>
<td>0 kg</td>
</tr>
<tr>
<td>Non-Ferro:</td>
<td>0 kg</td>
</tr>
<tr>
<td>Errors:</td>
<td><label id="amountOfErrors" name="amountOfErrors">:="webdata".AmountOfErrors:</label></td>
</tr>
</table>
</div>
<script type="text/javascript">
$(document).ready(function()
{
//query the amountOfErrors variable every second
$.ajaxSetup({ cache: false });
setInterval(function()
{
$.get("IOamountOfErrors.htm", function(result)
{
$('#amountOfErrors').text(result);
});
},1000);
});
</script>
<div class="footer">
Gebr. Gerrits Metaalhandel Helmond B.V. <br/>
Gebr. Gerrits Metaalrecycling B.V. <br/>
Auto Verschrotings Industrie "A.V.I." Den Bosch B.V. <br/>
Euregio Recycling B.V.<br/>
</div>
</div>
</body>
</html>
////////////// IOamountOfErrors.htm: /////////////////
< !-- AWP_IN_Variable Name='"webdata".AmountOfErrors' --> :="webdata".AmountOfErrors: (added the space between '<' and '!' else it wouldn't show the code on this site)
Already searched the net for this: I actually found the same stuff that I needed but for me it isn't working: https://www.dmcinfo.com/latest-thinking/blog/id/8567/siemens-s7-1200-web-server-tutorial--from-getting-started-to-html5-user-defined-pages
Please help me out!
Thanks in advance,
Bart
My best would be that you're debugging this local and not on a webserver right?
Because your javascript is trying to do a cross origin requests which doesn't work on file://
EDIT:
Can you try this code
<script type="text/javascript">
$(document).ready(function()
{
//query the amountOfErrors variable every second
setInterval(function()
{
$.post("IOamountOfErrors.htm", function(result)
{
$('#amountOfErrors').text(result);
});
},1000);
});
</script>
Well to update your label you can use setInterval. Here's Code which might be useful
var count = 20;
function myFunction() {
setInterval(function(){ startCounter() }, 1000);
}
$("#counterStart").click(function(e){
myFunction();
});
function startCounter() {
$("#counter").text(count);
}
HTML:
<input type="button" value="counter" id="counterStart" />
<span id="counter">dfsdfs </span>
Working FIDDLE