AJAX: I built something, but i dont know how it works!!
Posted: Wed Aug 16, 2006 10:07 am
This is a bit of a weird one. I was just messing around with AJAX to build something similar to DiggSpy
Anyway, it is a combination of code i have written and code i grabbed from various sources.
Basically, using AJAX, i query the database every 10 seconds to see if there is a new "action" in the database. This is then output to the screen.
...but, what i dont understand is, if after the 10 seconds has elapsed there isn't a new action, why it doesn't display the action it displayed 10 seconds ago becuase i didn't build anything into this to stop it.
Dont get me wrong, the way it is working is the intended way, but i just dont know how it does it.
Anyway, here is the code if someone could enlighten me
spy.js
out.php
Anyway, it is a combination of code i have written and code i grabbed from various sources.
Basically, using AJAX, i query the database every 10 seconds to see if there is a new "action" in the database. This is then output to the screen.
...but, what i dont understand is, if after the 10 seconds has elapsed there isn't a new action, why it doesn't display the action it displayed 10 seconds ago becuase i didn't build anything into this to stop it.
Dont get me wrong, the way it is working is the intended way, but i just dont know how it does it.
Anyway, here is the code if someone could enlighten me
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript"
src="latest.js"></script>
<script type="text/javascript" src="spy.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#spyContainer').spy({ limit: 10, fadeLast: 5, ajax: 'out.php', timeout: 2000,
push : function(r) { $('#' + this.id).prepend(r); }});
});
</script>
</head>
<body>
<div id="spyContainer"><div>
</body>
</html>Code: Select all
/*
jQuery Plugin spy (leftlogic.com/info/articles/jquery_spy)
(c) 2006 Remy Sharp (leftlogic.com) jquery[at]leftlogic[dot]com
$Id: spy.js,v 1.2 2006/08/14 10:07:18 remy Exp $
*/
var spyRunning = 1;
$.fn.spy = function(settings) {
if (!settings['ajax'])
{
alert("An AJAX/AJAH URL must be set for the spy to work.");
return;
}
var o = {
limit: (settings['limit'] || 10),
fadeLast: (settings['fadeLast'] || 5),
ajax: settings['ajax'],
timeout: (settings['timeout'] || 3000),
push: (settings['push'] || -1),
fadeInSpeed: (settings['fadeInSpeed'] || 'slow')
};
return this.each(function() {
var e = this;
var lr = '';
var epoch = new Date(1970, 1, 1);
var now = new Date();
var timestamp = Math.floor((now - epoch) / 1000);
e.timer = window.setInterval(function() {
if (spyRunning)
{
$.post(o['ajax'], { 'timestamp': timestamp }, function(r) {
if (r != lr) // don't show dupes
{
$('#' + e.id + ' > div:gt(' + (o['limit'] - 2) + ')').remove();
$('#' + e.id + ' > div:gt(' + (o['limit'] - o['fadeLast'] - 2) + ')').fadeEachDown();
if (o['push'] == -1)
$('#' + e.id).prepend(r);
else
o['push'].call(e, r);
$('#' + e.id + ' > div:first').fadeIn(o['fadeInSpeed']);
lr = r;
}
});
now = new Date();
timestamp = Math.floor((now - epoch) / 1000);
}
}, o['timeout']);
});
};
$.fn.fadeEachDown = function() {
var s = this.size();
return this.each(function(i) {
var o = 1 - (s == 1 ? 0.5 : 0.85/s*(i+1));
var e = this.style;
if (window.ActiveXObject)
e.filter = "alpha(opacity=" + o*100 + ")";
e.opacity = o;
});
};
function pauseSpy() {
spyRunning = 0; return false;
}
function playSpy() {
spyRunning = 1; return false;
}
Code: Select all
<?php
require("../../includes/generic/config.inc.php");
require("../../includes/generic/database.class.php");
$db = new db($dbhost, $dbname, $dbuser, $dbpass);
$sql = "SELECT * FROM `spy` ORDER BY `id` DESC LIMIT 1";
$result = $db->query($sql);
$line = $db->fetchArray($result, "MYSQL_ASSOC");
echo '<div class="jobList">';
echo '<div class="listItem">';
echo '<h3><a href="#">'.$line['action'].'</a></h3>';
echo '<p><strong>User IP:</strong>'.$line['userIP'].' <strong>Time:</strong> '.date("d/m/Y h:i:s A", $line['timestamp']).'</p>';
echo '</div>';
echo '</div>';
?>