New Topic/Question
Reply
I'm having a problem. I need some Javascript or Ajax code which will refresh the contents of a <div> tag (this is the only way I found to refresh a certain part of the page, because I have to avoid refreshing the whole page). I found various codes which worked partially (refreshed some text), but I actually need it to refresh a table which contains some PHP-defined images.
This is what I need - a part to refresh every once in a while (random time between 3 and 8 seconds).
The code for random time between 3 and 8 seconds:
//Get a random number between 1-6 (1000-6000) and add 2000, to get one between 3000-8000 var rand = Math.ceil(Math.random() * 6) * 1000 + 2000;
Now, within the generated random time, I need to refresh (reopen) this code:
<?php error_reporting(E_ALL ^ E_NOTICE); ?> <?php include 'DOOR Training Serbia_files/intro.php'; $rbr=izbor($_GET['parametar']); ?> <table style="text-align: center;" width="536px" border="1" cellspacing="1" cellpadding="3"> <tr> <td width="35px" style="text-align: center; vertical-align: top; padding: 0px 0px 0px 0px; background-color: rgb(204,204,255);"> <a href="index.php?parametar=<?php echo $rbr[0]; ?>"> <img src="DOOR Training Serbia_files/a<?php echo $rbr[0]; ?>0.jpg" alt="photo" id="pix1" style="border-width: 0px; vertical-align: top;" width="100%"></a></td> <td width="35px" style="text-align: center; vertical-align: top; padding: 0px 0px 0px 0px; background-color: rgb(204,204,255);"> <a href="index.php?parametar=<?php echo $rbr[1]; ?>"> <img src="DOOR Training Serbia_files/a<?php echo $rbr[1]; ?>0.jpg" alt="photo" id="pix2" style="border-width: 0px; vertical-align: top;" width="100%"></a></td> <td width="456px" style="text-align: center; vertical-align: top; background-color: rgb(204,204,255);"> <a href="index.php?parametar=<?php echo ($rbr[2]+($rbr[3]*10)); ?>"> <img src="DOOR Training Serbia_files/a<?php echo $rbr[2]; ?><?php echo $rbr[3]; ?>.jpg" alt="photo" id="pix3" style="border-width: 0px; vertical-align: top;" width="100%"></img></a></td> </tr> </table>
Both the images in the table above and the random time generation code work perfectly, so I don't need any changes there. The problem occurred when I tried refreshing the table code above. I read that you need to somehow extract the code you want to refresh to an external file and call it from there, which I tried earlier, but the images didn't show up at all!
I know the general procedure should be to make a separate <div> which should contain the table code above, and somehow create a function which would reload the contents of that <div>, with a specific id (e.g. id = "reloadThis"), with the same table code (practically, the code above, when refreshed, shows a different set of images every time - which works). Try adding your own images according to the specified path, or specify your own path if you want to try out the code above. Also, the code above imports the intro.php. Here it is:
<?php
function izbor($klik)
{
$rbr = array();
$i = 3 - round((($klik + 1) * 3)/10);
if ($i < 2) { $i = 2; }
while (count($rbr) < $i)
{
$t = rand(1,3);
if ($t <> ($klik % 10) )
{
if (!in_array($t,$rbr)) { $rbr[] = $t; }
}
}
if ( ($klik % 10) > 0 and ($klik % 10) < 4) { $rbr[] = ($klik % 10); }
if ($klik > 3) { $rbr[] = (round($klik / 10) % 3) + 1 ; }
$rbr[] = rand(1,3);
return $rbr;
}
?>
Anyway, here comes the tricky part. The code that should reload the contents of a <div> tag is:
function Ajax()
{
var
$http,
$self = arguments.callee;
if (window.XMLHttpRequest) {
$http = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try {
$http = new ActiveXObject('Msxml2.XMLHTTP');
} catch(e) {
$http = new ActiveXObject('Microsoft.XMLHTTP');
}
}
if ($http) {
$http.onreadystatechange = function()
{
if (/4|^complete$/.test($http.readyState)) {
document.getElementById('ReloadThis').innerHTML = $http.responseText;
setTimeout(function(){$self();}, 1000);
}
};
$http.open('GET', 'randomImage.html' + '?' + new Date().getTime(), true);
$http.send(null);
}
}
And the part which should initially call the function (and which is put in the <body> tag):
setTimeout(function() {Ajax();}, 1000);
The code above searches for a <div> tag with the id "ReloadThis" and every 1000 miliseconds (1 second) reload it with the table code. The part where it says randomImage.html was part of my experiments and should be ignored, but basically it represents the page to be opened inside the <div> tag. The thing is - I just need the table code I specified above to be loaded with images, which failed. I managed to show the table, but the images weren't shown.
Does anyone have any idea how to do this? (SUMMARY: reload the <div> tag by loading the specific table code above every randomly generated time)
MultiQuote
| 