Jump to content

AJAX mysql query update every 3 seconds

bux23

By bux23
in PHP Coding Help

 Share

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
Share on other sites
bux23 Newbie

bux23

Posted
  • Author
Posted (edited)

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
Link to comment
Share on other sites
bux23 Newbie

bux23

Posted
  • Author
Posted (edited)

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
Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

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.

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