Jump to content
Sign in to follow this  
bux23

AJAX mysql query update every 3 seconds

Recommended Posts

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

Share this post


Link to post
Share on other sites

you would place that code in a file for ajax to call to

then run a ajax command to fetch the contents of the file 

then use jquery to empty a master div then its the same div's contents to what you fetched

Share this post


Link to post
Share on other sites

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?

Edited by bux23

Share this post


Link to post
Share on other sites

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!

Edited by bux23

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • 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.