Div refreshen
Ik heb een alert.php bestandje (included via PHP in m'n header), die laat zien hoeveel nieuwe berichten iemand ontvangt. En in de toekomst nog een rank status etc..
Maar... Hoe laat ik hem om de 10 seconde refreshen zonder dat heel de page refresht?
Ik heb al vanalles geprobeerd wat mensen op Google zetten... Maar helaas tot hiertoe geen succes. Ik ben ook geen crack in scripten, dus zeker niet goed in Java of Jquery.
Zou iemand mij wat hulp kunnen bieden?
Gewijzigd op 27/12/2011 10:55:03 door Ken DC
Je moet namelijk client side een timer inbouwen die om de zoveel seconden/minuten een call naar de server maakt om de status te controleren. Java heb je daarvoor niet nodig.... JQuery of Javascript wel.
Ik ben waarschijnlijk gewoon te dom om iets te missen ofzo.
Ik had eentje die wel werkte... Maar ik liet me dan even 20 sms'jes toegestuurd krijgen, en ipv "You have 20 new messages" resette hij terug naar "You have 0 new messages."
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
$(document).ready(function(){
$.ajax({
url: "alert.php",
cache: false,
success: function(html){
$(".result").empty().html(html);
}
});
});
$.ajax({
url: "alert.php",
cache: false,
success: function(html){
$(".result").empty().html(html);
}
});
});
In een divje met class="result" verschijnt het resultaat.
Gewijzigd op 27/12/2011 11:38:44 door - Ariën -
Moet ik dan niet op een of andere manier laten refreshen om de zoveel tijd?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(document).ready(function(){
var ajaxRecursive = function() {
$.ajax({
url: "alert.php",
cache: false,
context: $('#result'),
success: function(html){
jQuery(this).empty().html(html);
}
});
setTimeout('ajaxRecursive()', 2000);
// 2000ms is de tijd dat hij weer moet
// refreshen. Dit komt overeen met 2s.
};
});
var ajaxRecursive = function() {
$.ajax({
url: "alert.php",
cache: false,
context: $('#result'),
success: function(html){
jQuery(this).empty().html(html);
}
});
setTimeout('ajaxRecursive()', 2000);
// 2000ms is de tijd dat hij weer moet
// refreshen. Dit komt overeen met 2s.
};
});
@aar, je hebt een foutje. Je zegt id="result" maar in JS doe je .result
Irritant :-P
Gewijzigd op 27/12/2011 11:39:37 door - Ariën -
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
//m'n header.php
<script src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script>
var auto_refresh = setInterval(
function()
{
$('#result').fadeOut('slow').load('alert.php').fadeIn("slow");
}, 2000);
</script>
<div id="result">
<?PHP
include ("alert.php");
?>
</div>
//En in m'n alert.php staat
<?PHP
include ("functie.php");
?>
<?php /* ------------------------- */
$dbres = mysql_query("SELECT * FROM `pm` WHERE (`read`) = 0 AND (`to`) = '" . $_SESSION['usr'] . "'");
$unread = mysql_num_rows($dbres);
/* ------------------------- */
echo "<a href=\"pm_inbox.php\"><b><font size=2 color=white>You have $unread messages. </font></b></a>";
?>
<script src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script>
var auto_refresh = setInterval(
function()
{
$('#result').fadeOut('slow').load('alert.php').fadeIn("slow");
}, 2000);
</script>
<div id="result">
<?PHP
include ("alert.php");
?>
</div>
//En in m'n alert.php staat
<?PHP
include ("functie.php");
?>
<?php /* ------------------------- */
$dbres = mysql_query("SELECT * FROM `pm` WHERE (`read`) = 0 AND (`to`) = '" . $_SESSION['usr'] . "'");
$unread = mysql_num_rows($dbres);
/* ------------------------- */
echo "<a href=\"pm_inbox.php\"><b><font size=2 color=white>You have $unread messages. </font></b></a>";
?>
Gewijzigd op 27/12/2011 11:47:22 door Ken DC
PS: doe wel aan foutafhandeling op je query.
Waarom?
setInterval voert de functie per 2000ms uit. Een AJAX request duurt soms wel wat langer. Het probleem wat je dan krijgt is dat de AJAX request nog bezig is en dan wordt de volgende al gestart. En zo gaat het door. Je krijgt dan een heleboel AJAX requests op de server die liggen te wachten en dit hoopt zich steeds maar op. Je kan wel nagaan dat dit niet ten gunste komt van de snelheid van een website.
In je PHP code staan nog wel wat fouten:
- Geen quotes om attributen.
- Inline CSS (style="", font="", width="", enz.) moet je niet gebruiken. Geef het een class/id mee en stijl die in een stylesheet die je vervolgens in de pagina laat met de link tag.
- Foutafhandeling query mist.
- Gebruik in PHP zoveel mogelijk enkele quotes en in HTML zoveel mogelijke dubbele. Dan hoef je ze niet meer te escapen.
- Haal variabelen uit quotes, met operators.string
Gewijzigd op 27/12/2011 12:03:34 door Wouter J
Deze wordt zowiezo 10 a 15 seconden.
En ik weet. xD Ben nog maar noob scripter, en is nog werk in progress. xD
Ik zal die setTimeout proberen ;)
Je wacht nu niet 20s, want 2000ms = 2s dus je wacht nu 2 seconde.
Ja dat weet ik :p Later zet ik hem hoger. Had hem op 2 seconden gezet omdat'k geen 20 seconden ofzo wilden wachten xD