Simple Javascript MYSQL validation function
I'm not very good at web development by the time, but I managed to create a web application with PHP that queries the MYSQL database and shows the data in HTML.
I would like to check if the table has changed using a timestamp field that I have already created and which is updated on every insert. Comparing two timestamps (previous and current) is the key,
but I am not very good at javascript.
How can I pass a parameter to the hastablechanged.php file (previous timestamp) and just return the javascript flag (1: changed, 0: not changed)? and ... how would a basic javascript function be to start a timer and call hastablechanged.php placing the old_timestamp and getting the flag and then updating the div?
I did googling searches, but the solutions I found are very complex and I know I just need a javascript function that I don't know how to write.
This is hastablechanged.php:
<?php
include 'config.php';
include 'opendb.php';
$table = "data_table";
$query_timestamp = "select timestamp from {$table} where id = 0;";
$timestamp = mysql_query("{$query_timestamp}");
if (!$timestamp) {
die("query failed");
}
$row_timestamp = mysql_fetch_array($timestamp);
echo $row_timestamp['timestamp'];
?>
And this is my index.php
<!DOCTYPE HTML PUBLIC>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>Data values</title>
</head>
<body>
<div id=data>
<? include("table.php");?>
</div>
</body>
</html>
where "table.php" is php code that fetches data and renders it by drawing html table.
I would really appreciate any help as I am stuck with this issue for completing my degree project
source to share
I finally figured out how to do it. Seeing him off so he can be useful to everyone.
It is a combination of php and javacript where:
-
php file return_timestamp.php just returns the timestamp of the line with ID = 0 (no real id, it just updates its timestamp on every insert with a trigger)
-
javascript compares the received timestamp with the previously received one (the first has a value of 0, so it updates the div at the beginning)
So:
javascript code which is the important thing (I assume you guys can copy php data from mysql):
<script type="text/javascript">
$(document).ready(function() {
$timestamp1='0';
var refreshId = setInterval(function() {
$.get(('return_timestamp.php', function(data) {
$timestamp2 = data; } )
if ( $timestamp2 != $timestamp1 ) {
$('#data').load('data.php');
$timestamp1 = $timestamp2; }
}, 1000);
});
</script>
Hope this helps and thanks also for YOUR help!
source to share
You need Ajax and setInterval.
This is how SetInterval works http://www.elated.com/articles/javascript-timers-with-settimeout-and-setinterval/
SetInterval basically just tells the browser to call the javascript function every x milliseconds.
Here are some Ajax examples http://www.w3schools.com/Ajax/ajax_examples.asp
Ajax is basically a way for javascript to request a page and get its content without reloading the page. In the example below, it tries to create an xmlhttprequest for all browsers (unfortunately it does it this way) and then sends the request. We define state_change as a function to be called when a response is returned. In this example, it just takes the answer and displays it, but you can do whatever you want.
Below is a modified example. It should work.
<html><head>
<script type="text/javascript">
var xmlhttp;
function loadPage()
{
xmlhttp=null;
if (window.XMLHttpRequest)
{// code for IE7, Firefox, Opera, etc.
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlhttp!=null)
{
xmlhttp.onreadystatechange=state_Change;
xmlhttp.open("GET","hastablechanged.php?tablename=awesometable",true);
xmlhttp.send(null);
}
else
{
alert("Your browser does not support XMLHTTP.");
}
}
function state_Change()
{
if (xmlhttp.readyState==4)
{// 4 = "loaded"
if (xmlhttp.status==200)
{// 200 = "OK"
document.getElementById('A1').innerHTML=xmlhttp.responseText;
}
else
{
alert("Problem retrieving ata:" + xmlhttp.statusText);
}
}
}
</script>
</head>
<body onLoad="setInterval('loadPage()', 10000)">
<p><b>Status:</b>
<span id="A1"></span>
</p>
<button onclick="loadPage()">Check Updates</button>
</body>
</html>
source to share