How to dynamically display MySQL data using jQuery and PHP?

Question

I have a PHP page that lists a bunch of words that it grabs from a MySQL database table. It displays the words in different sizes based on a count in the table:

<?php
 $selectStr = "select * from test";

 if ($results = MySQL($dbName, $selectStr))
 {
  $rowCount = MySQL_NUMROWS($results);
 }

 $i = 0;
 while ($i < $rowCount)
 {
  echo '<div style="float: left; font-size:' . (MySQL_RESULT($results,$i,'count') * 5) . 'px;">' . MySQL_RESULT($results,$i,'word') . '</div>';
  $i++;
 }
?>

The trick is that I want the content to display dynamically. So if a user is sitting on the page, and one of the word counts goes up, I want the word to change size without the user refreshing the page.

I am a novice with jQuery. I have used it a bit before, but only using examples. Can someone steer me in a good direction to have my page dynamically change the content without refreshing?

Sounds like you have to implement long polling. This article is pretty decent but there are others out there as well. — Matt
– Matt, Commented Aug 30, 2012 at 14:25
Thanks...long polling and Node sound great, but I think they are a bit over my head at this point. — Matt Brand
– Matt Brand, Commented Aug 30, 2012 at 14:49
can someone please help me on this ? stackoverflow.com/questions/44120124/… — Akash Sethi
– Akash Sethi, Commented May 23, 2017 at 12:22

Wearybands · Accepted Answer · 2012-08-30 14:53:56Z

3

You can auto refresh your page body like this ... give body id='body'

 <html>
 <head>
    <script type="text/javascript">
       var auto_refresh = setInterval(
         function ()
         {
          $('#body').load('wordscount.php').fadeIn("slow");
         }, 10000); // refresh every 10000 milliseconds
    </script>
 </head>
 <body>
     <div id='content'></div>
 </body>

Dont forget to include jquery inside your head tag

edited Aug 30, 2012 at 14:53

answered Aug 30, 2012 at 14:27

Wearybands

2,4658 gold badges37 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Matt Humphrey Over a year ago

I wouldn't recommend reloading the while body with AJAX; you should a div or something similar... <div id="content">

Wearybands Over a year ago

He can reload any html tag after sometime ... I just gave him an example to reload a portion of his page

Matt Brand Over a year ago

OK. I can put it all in a div with id="content", and then I would just have to replace the #body above with #content? And where would I put all of this code? At the end of the <head>?

Wearybands Over a year ago

yes just replace #body with #content and put this script inside head tag and on load call your php script that will get the all the words from table

Matt Brand Over a year ago

I'm still missing something. I have the script up top, with the php page in .load('getData.php'). Do I have anything in the content div? Is i just blank ( <div id="content"></div> )? How do I call my php script on load?

Jurgo · Accepted Answer · 2012-08-31 07:37:12Z

0

It calls the file rowfunctie.php every 30000ms and fills the topbar diff with with the result of the getRows function.

<div id="center-rows">
  <div id="links">Nu&nbsp;</div>
  <div id="rows">
    <div id="topbar"></div>
  </div>

  <div id="rechts">&nbsp;aantal rijen</div>
</div>

<script type="text/javascript">
function doRequest() {
  jQuery("#topbar").fadeOut('slow', function() {
    jQuery.ajax({
      type: "GET",
      url: "rowfunctie.php",
      cache: false,
      success: function(html){
        jQuery("#topbar").html(html);
        jQuery("#topbar").fadeIn('slow',function() {
        setTimeout('doRequest()',30000);
      });
   }
 });
 });
}
doRequest();
</script>

rowfunctie.php should look like this beneath:

<?php 
 $selectStr = "select * from test";

 if ($results = MySQL($dbName, $selectStr))
 {
  $rowCount = MySQL_NUMROWS($results);
 }

 $i = 0;
 while ($i < $rowCount)
 {
  echo '<div style="float: left; font-size:' . (MySQL_RESULT($results,$i,'count') * 5) . 'px;">' . MySQL_RESULT($results,$i,'word') . '</div>';
  $i++;
 }
?>

edited Aug 31, 2012 at 7:37

answered Aug 30, 2012 at 14:26

Jurgo

9034 silver badges18 bronze badges

4 Comments

Matt Brand Over a year ago

I don't really understand this at all. Is rowfuntie.php just the file that I wrote up top?

Jurgo Over a year ago

that's right! Only then you need to put that in a function called getRows(). Do you understand?

Matt Brand Over a year ago

I don't, sorry I'm a novice with javascript and jQuery. What goes in the function getRows()?

Jurgo Over a year ago

Sorry you don't need to put this in an function. I edited my answer and put in the rowfunctie.php. I also edited something in the javascript function above. But this should work i just tested it.

Collectives™ on Stack Overflow

How to dynamically display MySQL data using jQuery and PHP?

2 Answers 2

5 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related