Should I use AJAX here or JQuery?

[coupe-r]

Hi All,

 

I have a table on my main screen that will get the top 4 results in a table.  I want this table refreshed every 1 minute or so and update the results.  When there is a new result, I was it to appear on top and fade in.

 

Im assuming JQuery here, but can anyone else chime in?

 

Thanks.

[trq]

Should I use AJAX here or JQuery?

 

Do you know what Ajax is? Your question is like asking "Should I drive to the store or take the car?" jQuery is a tool which can be used (amongst other things) to write Ajax. Ajax is simply a methodology, it is not a technology in itself.

 

Now, onto your question. Yes, you are going to need to use Ajax here unless you want the whole page to refresh every time new data is requested. I would use jQuery to do this, but that is only because it is my preferred library. There are many others around, and it could also be achieved quite simply using pure Javascript.

[coupe-r]

Thank you for the reply.  I've never used either but was told to use JQuery over AJAX, but didn't know why.  Sorry for my ignorance.

 

Would you happen to know of a tutorial of what I am trying to do?  If not, could you give me some good search terms besides "jquery"

 

I really appreciate your time.

[trq]

jQuery is just a Javascript framework. It makes programming Javascript easier.

 

Take a look at how you do Ajax requests with jQuery here: http://api.jquery.com/jQuery.ajax/

[coupe-r]

After trial and error (and YouTube), I got everything working.  However, I need the newest result to fade in and I'm not quiet sure what/where to do this.

 

Basically, the script calls the data.php every 10 seconds and gets the top 4 results.  The only thing I need is when there is a new result, have that fade in.

 

Any help is appreciated.

 

index.php

<table width="70%" border="0" cellpadding="5" cellspacing="0">
     <tr>
          <td height="20" class="statsHeader">What's going on</td>
     </tr>
</table>

<script type="text/javascript">
$(document).ready(function()
{
	$('#actionResults').load('data.php');
	setInterval(function()
	{
		$('#actionResults').load('data.php');
	}, 10000);
});
</script>

<div id="actionResults"></div>

          </td>
     </tr>
</table>

 

 

data.php

<?php
session_start();
require_once("../connect1.php");

$result = mysqli_query($connect, "SELECT log_id, ip FROM log WHERE client_id = '".$_SESSION['client_id']."' ORDER BY log_id DESC LIMIT 4");

$item = array();
$log_id = array();

while($row = mysqli_fetch_array($result))
{
	$item[] = $row['ip'];
	$log_id[] = $row['log_id'];
}


echo '<table width="70%" border="0" cellpadding="5" cellspacing="0" class="statsBox">';

	foreach($item as $value)
	{
		echo '<tr>';
		echo '<td style="padding-left: 20px;">'.$value.'</td>';
		echo '</tr>';
	}
echo '</table>';
?>

[trq]

$('#actionResults').fadeIn().load('data.php');

[coupe-r]

Thanks, I tried that before and it didn't work.

 

Im guessing this is because i'm loading the entire data.php, which selects the top 4 records at the same time, not just the newest?

[trq]

Thanks, I tried that before and it didn't work.

 

Im guessing this is because i'm loading the entire data.php, which selects the top 4 records at the same time, not just the newest?

 

Yeah, that would make perfect sense.

[coupe-r]

Would anyone have any idea on how to make this work so the newest record fades in, given the code above?

[trq]

Don't refetch all 4 entries, just get entries that are newer than what your displaying.