I am trying to build a really simple web page that all it does is update the UI every second with a random number from PHP. I understand that I need to use AJAX but not familiar with it at all and could not figure out from all the research that I have done about it how to use it to accomplish my goal.
Here is my HTML/PHP file:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript">
$(function(){
setInterval( function(){
$.get("get_num.php", function(data) {
$('#data').html(data);
});
}, 1000);
});
</script>
</head>
<body>
<?php include_once('get_num.php') ?>
<div id="data"></div>
</body>
</html>
get_num.php does nothing else but echo-ing a random number.
Any idea why this code is not updating my UI with the new number every second? Am I not using AJAX properly? What am I doing wrong here? Any help would be much appreciated.
The following code calls the get_num.php file
setInterval(function() {
$.get("get_num.php", function(data) {
});
}, 1000);
You need to add code within the line function (data) {} to handle the received data of the ajax call.
This could be something like:
setInterval(function() {
$.get("get_num.php", function(data) {
console.log(data);
$("body").html(data);
});
}, 1000);
You are not actually updating your UI.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript">
$(function(){
setInterval(function() {
$.get("get_num.php", function(data) {
$('#data').html(data);
});
}, 1000);
});
</script>
</head>
<body>
<?php include_once('get_num.php') ?>
<div id="data"></div>
</body>
</html></div>