refreshing html table with jquery
Hello everyone!
I am working on a project where I need to have a html table to be first loaded with info from mysql database with items then refresh, each item has a status checkbox next to it where I can check or uncheck. This is intended for multiuser platform so diferent users connected to the same web page could have access to the data. What I want is to updates this table constantly on all sessions so that the changes one makes the other users could notice instantly. I am putting my code next to get some help from the communitty.
Front page busqueda.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript" src="scripts/the_script.js"></script>
<title>BUSQUEDA FRENETICA</title>
<link rel="stylesheet" type="text/css" href="styles/style.css" />
</head>
<body>
Buscando...<br />
<h3>Tabla recuperada</h3>
<table width="100%" border="0">
<tr id="hdr">
<td width="20%" align="center"> CHECK</th>
<td width="50%"> DESCRIPCION</th>
<td width="30%"> PRECIO</th>
</tr>
</table>
<table width="100%" border="0" id="fila">
</table>
</body>
</html>
Next the search file traerdatos.php
<?php
$hostname_conexion = "localhost";
$database_conexion = "listacompra";
$username_conexion = "root";
$password_conexion = "123";
$conexion = mysql_pconnect($hostname_conexion, $username_conexion, $password_conexion) or trigger_error(mysql_error(),E_USER_ERROR);
mysql_select_db($database_conexion, $conexion);
$sql = "SELECT articulo_estado, articulo_descripcion, articulo_precio FROM articulo WHERE articulo.articulo_estado = 1 ORDER BY articulo.articulo_descripcion ASC";
$res = mysql_query($sql, $conexion) or die('From traerdatos: '.mysql_error());
$result = array();
while($row = mysql_fetch_array($res))
array_push($result, array('articulo_estado' => $row[0],'articulo_descripcion' => $row[1],'articulo_precio' => $row[2],));
echo json_encode(array("result" => $result));
?>
Last my javascript/jquery file the_script.js
$(document).ready( function(){
done();
});
function done(){
setTimeout( function(){
actualiza();
done();
}, 200);
}
function actualiza(){
$.getJSON("traerdatos.php", function(data){
$("#fila").empty();
$("#hdr").css("background-color","#BFFFBF");
$.each(data.result, function(){
$("#fila").append("<tr><td width='20%' id='chk'><input type='checkbox' '" + ((this['articulo_estado'] == 1) ? 'checked=\"checked\"' : ' ') + "'/></td><td width='50%'>" + this['articulo_descripcion'] + "</td><td width='30%'>Lps." + this['articulo_precio'] + "</td></tr>");
});
});
}
I really would appreciate any hel. Thanks fellow programmers!
amin