Hey criminalpointers!
Ik zit met een klein probleem, ik heb net internet voor 2 uur lopen afzoeken naar het volgende:
ik wil graag een div met id 'button' elke 5 seconden refreshen.
Ik zie veel artikelen op internet hoe ik hele pagina's kan refreshen, maar niet alleen een DIV die bijv. een id heeft.
Hebben jullie misschien een oplossing?
Zelf heb ik dit ook eens gewild alleen dit kan niet met html/css. Je moet iets met AJAX doen. Verder kan ik niet helpen.
Ja klopt, bedankt voor je tijd. Hopelijk weet iemand anders hoe.
http://www.w3schools.com/ajax/default.asp
daar kan je ajax leren, maar er staan ook voorbeelden die je iets kunt aanpassen voor jouw doeleinde...
en dan gebruik je
document.getElementById('idvandiv').innerHTML = ajaxresponse; //ajaxresponse rul je moeten vervangen, maar zo krijg je een idee
om de html binnen die div te vervangen...
de voorbeelden zijn behoorlijk duidelijk vindt ik
maar mocht je iets niet snappen, vraag het gerust
Ok, dit heeft me al veel in de goede rivhting gebracht, ik heb de tut gevolgd die op de w3school stond...
Het is me eigenlijk alleen maar onduidelijker geworden. Ik zal hieronder mijn code posten, en dan daarmee laten zien wat ik ong wil, zodat er misschien een simpelere oplossing kan komen:
<?PHP
session_start();
include("connection/connection.php");
$query = mysql_query("SELECT *,UNIX_TIMESTAMP(NOW()) AS `now`, UNIX_TIMESTAMP(`car_time`) AS `car_time`, UNIX_TIMESTAMP(`crime_time`) AS `crime_time` FROM `users` WHERE user='".$_SESSION['login']."'") or die (mysql_error());
$speler = mysql_fetch_object($query);
$wait_car = 180;
$wait_crime = 60;
$time_car = $speler->now-$speler->car_time;
$time_crime = $speler->now-$speler->crime_time;
$som_car = $wait_car-$time_car;
if ($som_car <= 0) { $som_car = "Nu"; }
$som_crime = $wait_crime-$time_crime;
if ($som_crime <= 0) { $som_crime = "Nu"; }
?>
<!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=utf-8" />
<link rel="stylesheet" type="text/css" href="styles/css/menu.css" />
<title>Passato</title>
<script language="javascript" type="text/javascript">
function update()
{
result = document.getElementById("crime").innerHTML;
resultTwo = document.getElementById("crime_td").innerHTML;
if (result != "Nu")
{
result--;
if (result <= 0)
{
result = "Nu";
document.getElementById("crime").style.textDecoration = "blink";
document.getElementById("crime").style.color = "white";
}
}
else
{
setTimeout('window.location.reload()',15000);
}
document.getElementById("crime").innerHTML = result;
result = document.getElementById("car").innerHTML;
if (result != "Nu")
{
result--;
if (result <= 0)
{
result = "Nu";
document.getElementById("car").style.textDecoration = "blink";
document.getElementById("car").style.color = "white";
}
}
else
{
setTimeout('window.location.reload()',20000);
}
document.getElementById("car").innerHTML = result;
}
window.setInterval("update()", 1000);
</script>
</head>
<body>
<table cellspacing="0" width="95%">
<tr>
<td class="header">Help</td>
</tr>
<tr>
<td class="menu"><a href="#" class="menuLink">Test</a></td>
</tr>
<tr>
<td class="menu"><a href="#" class="menuLink">Test</a></td>
</tr>
<tr>
<td class="menu"><a href="#" class="menuLink">Test</a></td>
</tr>
<tr>
<td class="menu"><a href="#" class="menuLink">Test</a></td>
</tr>
</table>
<br />
<table cellspacing="0" width="95%">
<tr>
<td class="header">Algemeen</td>
</tr>
<tr>
<td class="menu"><a href="start.php" class="menuLink" target="midden">Start</a></td>
</tr>
<tr>
<td class="menu"><a href="#" class="menuLink">Test</a></td>
</tr>
<tr>
<td class="menu"><a href="#" class="menuLink">Test</a></td>
</tr>
<tr>
<td class="menu"><a href="#" class="menuLink">Test</a></td>
</tr>
<tr>
<td class="menu"><a href="#" class="menuLink">Test</a></td>
</tr>
<tr>
<td class="menu"><a href="#" class="menuLink">Test</a></td>
</tr>
<tr>
<td class="menu"><a href="#" class="menuLink">Test</a></td>
</tr>
<tr>
<td class="menu"><a href="garage.php" class="menuLink" target="midden">Garage</a></td>
</tr>
<tr>
<td class="menu"><a href="#" class="menuLink">Test</a></td>
</tr>
<tr>
<td class="menu"><a href="#" class="menuLink">Test</a></td>
</tr>
<tr>
<td class="menu"><a href="#" class="menuLink">Test</a></td>
</tr>
</table>
<br />
<table cellspacing="0" width="95%">
<tr>
<td class="header">Communicatie</td>
</tr>
<tr>
<td class="menu"><a href="#" class="menuLink">Test</a></td>
</tr>
<tr>
<td class="menu"><a href="#" class="menuLink">Test</a></td>
</tr>
</table>
<br />
<table cellspacing="0" width="95%">
<tr>
<td class="header" colspan="2">Misdaden</td>
</tr>
<tr>
<td class="menu" id="crime_td"><a href="crime.php" class="menuLink" target="midden">Pleeg een misdaad<span id="crime" class="counter"><?PHP echo $som_crime; ?></span></a></td>
</tr>
<tr>
<td class="menu" colspan="2"><a href="car.php" class="menuLink" target="midden">Auto stelen<span id="car" class="counter"><?PHP echo $som_car; ?></span></a></td>
</tr>
<tr>
<td class="menu" colspan="2"><a href="#" class="menuLink">Test</a></td>
</tr>
<tr>
<td class="menu" colspan="2"><a href="#" class="menuLink">Test</a></td>
</tr>
</table>
<br />
<table cellspacing="0" width="95%">
<tr>
<td class="header">Zoek een speler</td>
</tr>
<tr>
<td class="search">
Spelers naam:
<form>
<input type="text" name="name" class="text" value="" />
<input type="submit" name="name" class="submit" value="Zoek" />
</form>
</td>
</tr>
</table>
</body>
</html>Lijn 46 en 65 wil ik graag automatiseren, zodat niet de hele pagina reload hoeft te worden.|-)
nu ik dit zie vraag ik me iets af:
Waarom in iets naam wil je elke seconde een ajax request doen?
Wat is er ooit mis met een countdown?
Een countdown heeft alleen maar voordelen!
Edit:
even een countdown scriptje voor je opgezocht dat ik ooit nog eens voor iemand uit een andere (niet werkende) countdown gemaakt heb...
<html>
<head>
<title>test</title>
<script language="javascript">
time = new Date();
function updateTime(id, countdown, href) {
now = new Date();
if(countdown < Number(now.getTime()))
countdown = now.getTime();
if(countdown == Number(now.getTime()))
top.location.href = href;
now.setTime(countdown - now.getTime());
var hour = now.getUTCHours();
if(hour < 10)
hour = "0" + hour;
var minute = now.getUTCMinutes();
if(minute < 10)
minute = "0" + minute;
var second = now.getUTCSeconds();
if(second < 10)
second = "0" + second;
document.getElementById(id).innerHTML = hour +":"+ minute +":"+ second;
}
setInterval("updateTime('test1', 10000 + time.getTime(), '')",500);
setInterval("updateTime('test2', 3600000 + time.getTime(), '')",500);
setInterval("updateTime('test3', 86400000 + time.getTime(), '')",500);
</script>
</head>
<body>
<table>
<tr>
<td id="test1" class="mainTxt"></td>
</tr>
<tr>
<td id="test2" class="mainTxt"></td>
</tr>
<tr>
<td id="test3" class="mainTxt"></td>
</tr>
</table>
</body>
</html>Ik snap een countdown script wel helemaal, alleen als de count een keer bij nul komt, dus uitgeteld is wil ik dat hij elke 5 sec ofzo controleert of er weer een nieuwe countdown gestart kan worden.
En dit wil ik dus zonder dat de hele pagina refresht.
<html>
<head>
<script type="text/javascript">
function GetXmlHttpObject()
{
var xmlHttp = null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
function twoChars(getal)
{
return (getal < 10) ? '0' + getal: getal;
}
function Countdown(id, totalSec, href, text)
{
if ( totalSec == 0)
{
Request(id, true, href, text);
return true;
}
if ( totalSec > 0 )
{
innerHTML = twoChars( Math.floor( (totalSec % 3600) / 60) ) + ':' + twoChars( totalSec % 60 );
if (totalSec >= 3600)
{
innerHTML = twoChars( Math.floor(totalSec / 3600)) + ':' + innerHTML;
}
totalSec--;
setTimeout("Countdown('" + id + "', " + totalSec + ", '" + href + "', '" + text + "')", 1000);
document.getElementById(id).innerHTML= innerHTML;
}
return true;
}
function Request(id, change, href, text)
{
if (change = true)
{
document.getElementById(id).innerHTML = '<a href="' + href + '">' + text + '</a>';
}
document.getElementById('text').innerHTML = document.getElementById('text').innerHTML + 'boe!<br />';
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Your browser does not support AJAX!");
return;
}
var url="ajax.php";
url=url+"?id="+id;
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
function stateChanged()
{
if(xmlHttp.readyState == 4)
{
if( xmlHttp.responseText > 0)
{
Countdown(xmlHttp.id, xmlHttp.responseText, xmlHttp.href, xmlHttp.text);
document.getElementById('text').innerHTML = document.getElementById('text').innerHTML + xmlHttp.responseText + ' - done!<br />';
return true;
}
setTimeout("Request('" + xmlHttp.id + "', false, '" + xmlHttp.href + "', '" + xmlHttp.text + "')", 1000);
}
}
window.onload = function()
{
Countdown('test', 6, 'http://www.criminalspoint.net', 'CP');
}
</script>
</head>
<body>
<div id="test"></div>
<br />
<div id="text"></div>
</body>
</html>Is dit genoeg voorgekauwd?
Inderdaad het doet het nog niet...
maar het geeft je wel een idee van hoe het zou kunnen...
succes met zorgen dat het werkt...
ik heb al te veel gedaan eigenlijk...
thx dit heeft me aardig geholpen!
Je kunt beter eerst Javascript leren voordat je je met AJAX gaat bemoeien... De meeste AJAX scripts worden zo bagger geschreven omdat er niemand is die er verstand van heeft...
CitaatJe kunt beter eerst Javascript leren voordat je je met AJAX gaat bemoeien... De meeste AJAX scripts worden zo bagger geschreven omdat er niemand is die er verstand van heeft...
Klopt. Ben bezig met een in ajax geschreven criminal en die is f*cking snel :)8-|
Heb je nog geen account? Registreer je nu en word deel van onze community!