jQuery laten communiceren met php file
Op dit moment laat ik op mijn website d.m.v. jQuery
een content van een php file om de 10 seconden inladen
in een div. In die php file checkt hij of er een nieuw
privebericht is, zoja, dan zal er een icoontje verschijnen.
Opzich werkt dit fijn, alleen ik vraag me af of dit anders kan.
Is het bijvoorbeeld mogelijk om met jQuery te communiceren met
een php script waarin hij dit checkt en als het zo is dat de
gebruiker een nieuw bericht heeft, hij een respons terug krijgt
en vervolgens het icoontje veranderd?
Bij voorbaat dank!
Mik.
Toevoeging op 10/02/2011 19:27:23:
EDIT:
Net zoals bij facebook laat maar zeggen.
Ja precies. Wat ik wil is dat hij niet refresht, want dan zie je
om de 10 sec die wait cursor, vrij irritant. Ook als de div een bepaalde
groote heeft en je scrollt helemaal naar beneden dan zal de website bij het
refreshen omhoog springen.
Ik wil dus dat het jQuery script communiceert met een php bestand en als dat php bestand ziet dat er een nieuw bericht is, dat hij bijvoorbeeld een respons geeft en dat dan het jquery script het icoontje veranderd.
Ik wel hoor..
@phper
Ja dat is inderdaad een mogelijkheid.. Maar ik vind het zelf
ook mooier als het op die manier gaat. Maar is er een mogelijkheid
om jquery te laten communiceren met een php file en dat jquery
bij een respons een actie uitvoert? Iemand zal me hier erg mee helpen
Zet in een javascript variabele de id van het laatst ontvangen bericht.
Maak een functie die om de zoveel tijd niets anders doet dan die id naar de server sturen; indien die id niet overeen komt met de laatste id op de server, stuur je een respons die een andere javascript functie triggert.
Die andere functie haalt dan de nieuwe berichten.
Zo heb je een minimale transfert.
(Eventueel doe je precies het zelfde met de tijd van het gepost bericht ipv. met de ID)
Gewijzigd op 11/02/2011 11:18:50 door Kris Peeters
Bedankt voor het antwoord.. alleen ik weet 0,0 van javascript.
Ik ben nu een beetje bezig met jQuery onder de knie te krijgen.
Om het id in een variable te zetten dat kan ik wel, maar om
dingen naar de server te sturen en response terug te sturen?
Geen idee hoe ik dit voor elkaar kan krijgen..
Heb je misschien een link naar een pagina waar het een en ander word
uitgelegd, zodat ik een beetje kan gaan kloten? Of misschien een klein
voorbeeldje geven?
Bedankt.
Volledig werkend.
Zie dat je een gelijkaardige tabel hebt in je DB en vertaal de query's daarnaar.
jQuery downloaden en op de juiste plaaats zetten
DB connectie gegevens aanpassen uiteraard.
verdere uitleg: mijn vorige post hier
index.php
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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<?php
$db = mysql_connect('localhost', 'root', '');
mysql_select_db('phphulp', $db);
if (!empty($_GET['ajax'])) { // een ajax actie
switch ($_GET['action']) {
case 'ping': // zoeken naar laatste id
$sql = "SELECT id FROM shoutbox WHERE id > ". (int) $_GET['id'] ." ORDER BY id DESC"; // zoekt naar hoogste ID. Er wordt verondersteld dat de ID een auto-increment is en dus elk volgend bericht een hogere id heeft. Eventueel vervang je ID door geposte tijd.
$res = mysql_query($sql);
if ($row = mysql_fetch_assoc($res)) {
echo $row['id'];
exit();
}
break;
case 'get_messages': //
$sql = "SELECT id, nick, message, created FROM shoutbox ORDER BY id DESC"; // zoekt naar hoogste ID. Er wordt verondersteld dat de ID een auto-increment is en dus elk volgend bericht een hogere id heeft. Eventueel vervang je ID door geposte tijd.
$res = mysql_query($sql);
$content = "";
while ($row = mysql_fetch_assoc($res)) {
$content .= '<div class="message">
<span class="nick">'. htmlentities($row['nick']) .'</span>
<span class="created">'. htmlentities($row['created']) .'</span>
<div class="text">'. htmlentities($row['message']) .'</div>
</div>';
}
echo $content;
exit();
break;
}
}
else {
echo html('
<h1>Shoutbox</h1>
<div id="messages"></div>
');
}
function html($body) {
return '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//NL" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="shortcut icon" type="image/gif" href="favicon.gif"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> Peilen naar nieuw ID </title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="js.js"></script>
<style>
#messages {
border: 1px solid #aaaaaa;
width: 400px;
}
#messages .message{
border: 1px solid #aaaaaa;
margin: 5px;
}
</style>
</head>
<body>
'. $body .'
</body>
</html>';
}
?>
$db = mysql_connect('localhost', 'root', '');
mysql_select_db('phphulp', $db);
if (!empty($_GET['ajax'])) { // een ajax actie
switch ($_GET['action']) {
case 'ping': // zoeken naar laatste id
$sql = "SELECT id FROM shoutbox WHERE id > ". (int) $_GET['id'] ." ORDER BY id DESC"; // zoekt naar hoogste ID. Er wordt verondersteld dat de ID een auto-increment is en dus elk volgend bericht een hogere id heeft. Eventueel vervang je ID door geposte tijd.
$res = mysql_query($sql);
if ($row = mysql_fetch_assoc($res)) {
echo $row['id'];
exit();
}
break;
case 'get_messages': //
$sql = "SELECT id, nick, message, created FROM shoutbox ORDER BY id DESC"; // zoekt naar hoogste ID. Er wordt verondersteld dat de ID een auto-increment is en dus elk volgend bericht een hogere id heeft. Eventueel vervang je ID door geposte tijd.
$res = mysql_query($sql);
$content = "";
while ($row = mysql_fetch_assoc($res)) {
$content .= '<div class="message">
<span class="nick">'. htmlentities($row['nick']) .'</span>
<span class="created">'. htmlentities($row['created']) .'</span>
<div class="text">'. htmlentities($row['message']) .'</div>
</div>';
}
echo $content;
exit();
break;
}
}
else {
echo html('
<h1>Shoutbox</h1>
<div id="messages"></div>
');
}
function html($body) {
return '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//NL" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="shortcut icon" type="image/gif" href="favicon.gif"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> Peilen naar nieuw ID </title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="js.js"></script>
<style>
#messages {
border: 1px solid #aaaaaa;
width: 400px;
}
#messages .message{
border: 1px solid #aaaaaa;
margin: 5px;
}
</style>
</head>
<body>
'. $body .'
</body>
</html>';
}
?>
js.js
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
34
35
36
37
38
39
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
34
35
36
37
38
39
var global_id = 0;
var my_interval = 3000; // om de zoveel milliseconden checken
$(document).ready(function(e) {
ping_for_id(0);
});
function ping_for_id () {
$.ajax({
type: "GET",
url: 'index.php?ajax=1&action=ping&id='+ global_id, // op deze url peil je enkel naar de laatste id
success: check_messages
});
}
function get_messages () {
$.ajax({
type: "GET",
url: 'index.php?ajax=1&action=get_messages&id='+ global_id, // op deze url peil je enkel naar de laatste id
success: new_messages_found
});
}
function check_messages(data) {
if (Number(data) > 0) {
// dit wordt dus de nieuwe laatste ID
global_id = data;
get_messages ();
}
else {
// geen nieuwe ID gevonden. Over enkele tijd opnieuw probereb
setTimeout('ping_for_id ()', my_interval);
}
}
function new_messages_found (data) {
// berichten in <div id="messages"></div> zetten
$('#messages').html(data);
// en uiteraard opnieuw het peilen in gang steken
ping_for_id ();
}
var my_interval = 3000; // om de zoveel milliseconden checken
$(document).ready(function(e) {
ping_for_id(0);
});
function ping_for_id () {
$.ajax({
type: "GET",
url: 'index.php?ajax=1&action=ping&id='+ global_id, // op deze url peil je enkel naar de laatste id
success: check_messages
});
}
function get_messages () {
$.ajax({
type: "GET",
url: 'index.php?ajax=1&action=get_messages&id='+ global_id, // op deze url peil je enkel naar de laatste id
success: new_messages_found
});
}
function check_messages(data) {
if (Number(data) > 0) {
// dit wordt dus de nieuwe laatste ID
global_id = data;
get_messages ();
}
else {
// geen nieuwe ID gevonden. Over enkele tijd opnieuw probereb
setTimeout('ping_for_id ()', my_interval);
}
}
function new_messages_found (data) {
// berichten in <div id="messages"></div> zetten
$('#messages').html(data);
// en uiteraard opnieuw het peilen in gang steken
ping_for_id ();
}
Laat dit apart draaien. Voeg dan via een ander venster, met jouw site, een nieuw bericht toe. Het bericht zou ook moeten verschijnen.
Gewijzigd op 27/02/2011 11:58:04 door Kris Peeters