Jump to content

AJAX mysql query update every 3 seconds

bux23

By bux23
in PHP Coding Help

Recommended Posts

bux23 Newbie

bux23

Posted
Posted

Hello everyone,

 

I have joined this forum just now hoping to find some help for my problem.

 

I have a mysql query in my php file which i output to an array of html divs. The code is as follows:

$result = mysql_query("SELECT * FROM numserved WHERE status = 'on'") or die(mysql_error());
while($row = mysql_fetch_array($result)) {
?>
	<div style="font-size:<?php echo $fontsize; ?>pt;" valign="middle" class="numberz" align="center" >
      <?php echo $row['number']; ?></div><?php	

}
?>

I wanted to know if anyone could help me write the code to make this query be updated every 3 seconds without reloading the whole page.

 

I know it is done by Ajax and tried to implement the Jquery solution , but I wasnt able to apply it.

 

Anyone would be so kind to tell me the exact code i need and where to place it?

 

Thank you

Link to comment
https://forums.phpfreaks.com/topic/295870-ajax-mysql-query-update-every-3-seconds/
Share on other sites
bux23 Newbie

bux23

Posted
  • Author
Posted

I have found an easy example which I am trying and it is not working for me:


PHP page to get data from (getTable.php)

<?php
    echo '<table><tr><td>TEST</td></tr></table>';
?>


in HTML body:

<div id="tableHolder"></div>

in html head:

<script type="text/javascript">
    $(document).ready(function(){
      refreshTable();
    });

    function refreshTable(){
        $('#tableHolder').load('getTable.php', function(){
           setTimeout(refreshTable, 5000);
        });
    }
</script>

The html page is not loading the table and text from getTable.php... what is the problem?

bux23 Newbie

bux23

Posted
  • Author
Posted

Seems to work now with code I posted earlier (forgot to include the jquery.js file). Though now that i try to use the same code with more complex data to load it does not work.

this is my current getTable.php code:

<?php
$servername = "localhost";
$username = "root";
$password = "root";
$dbname = "EQ";


$connection = mysql_connect($servername,$username,$password);
if (!$connection) {
    echo "Database connection error";
}

$db_select = mysql_select_db($dbname,$connection);
if (!$db_select) {
    echo "Database not selected";
}



echo '<table class="BGC" id="todo" width="100%" height="100%" align="center" cellspacing="10px">';


$result = mysql_query("SELECT * FROM numserved WHERE status = 'on'") or die(mysql_error());

$numrows = mysql_num_rows($result);
if($numrows == 0) {

echo '<tr><td width="100%" height="100%" align="center" style="vertical-align:middle;"><img src="LOGO_SHADE.png" alt="Quattro e Venti Beers & Cheers" style="width:50%;">';

} else {

echo '<tr><td height="30px" colspan="6" align="center" class="headz"> SI SERVONO I SEGUENTI NUMERI </td></tr><tr>'


$droprow = 0;
$fontsize = 100;
$itemsonrow = 3;

if($numrows == 1 ) { $fontsize = 350; }
if($numrows >= 2 && $numrows <= 3) { $fontsize = 250; }
if($numrows >= 4 && $numrows <= 6) { $fontsize = 172; }
if($numrows >= 7 && $numrows <= 9) { $fontsize = 110; }
if($numrows >= 10) { $fontsize = 90; $itemsonrow = 4; }
if($numrows >= 21) { $fontsize = 80; $itemsonrow = 5; }
if($numrows >= 26) { $fontsize = 60; $itemsonrow = 6; }

while($row = mysql_fetch_array($result)) {

    $droprow++;

echo '<td style="font-size:'.$fontsize.'pt;" valign="middle" class="numberz" align="center" >
      '.$row['number'];.'</td>'    
      if ($droprow == $itemsonrow) { echo '</tr><tr>'; $droprow = 0;}
}
echo '</tr></table>'
 
?>

and my index.php

<html>
<head>

<script type="text/javascript" src="jquery-1.11.2.min.js"></script>

<script type="text/javascript">
    $(document).ready(function(){
      refreshTable();
    });

    function refreshTable(){
        $('#tableHolder').load('getTable.php', function(){
           setTimeout(refreshTable, 5000);
        });
    }
</script>

<style>

.numberz {
    color: black;
    background-color: rgba(255,255,255,0.73);
    border-color: #151515;
    text-align:center;
    border-style: solid;
    border-width: 3px;
    font-family: impact;
    vertical-align: middle;
    letter-spacing: 8px;
    text-shadow:-3px 3px 1px rgba(0,0,0,0.58);
    
}

.headz {
	background-color: rgba(0,0,0,0.56);
	font-size: 40pt;
	letter-spacing: 3px;
    color: white;
    text-align:center;
    font-family: impact;
    vertical-align: middle;
    text-shadow:-2px 2px 1px rgba(21,21,21,0.93);
  
}

.FDR {
	overflow: auto;
	float: right;
	position: absolute;
	top: 40px;
	left: 95%;
	z-index: 1000;
	border-color: white;
    border-style: solid;
    border-width: 1px;
}

.FDL {
	overflow: auto;
	float: left;
	position: absolute;
	top: 19px;
	left: 40px;
	z-index: 1000;
}

.BGC {
	background:
linear-gradient(45deg, #92baac 45px, transparent 45px)64px 64px,
linear-gradient(45deg, #92baac 45px, transparent 45px,transparent 91px, #e1ebbd 91px, #e1ebbd 135px, transparent 135px),
linear-gradient(-45deg, #92baac 23px, transparent 23px, transparent 68px,#92baac 68px,#92baac 113px,transparent 113px,transparent 158px,#92baac 158px);
background-color:#e1ebbd;
background-size: 128px 128px;
}
</style>

<script type="text/javascript">
  function goFullscreen(id) {
    var element = document.getElementById(id);
    if (element.mozRequestFullScreen) {
      element.mozRequestFullScreen();
    } else if (element.webkitRequestFullScreen) {
      element.webkitRequestFullScreen();
   }
  }
</script>

</head>

<body>

<div id="tableHolder"></div>

<div class="FDR">
<img src="FS.png" width="20px" height="20px" onclick="goFullscreen('todo'); return false">
</div>

</body>
</html>

nothing loading!

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.