jQuery laten communiceren met php file

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Mik PHP

Mik PHP

10/02/2011 19:25:26
Quote Anchor link
Hey allen!

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.
 
PHP hulp

PHP hulp

12/12/2019 11:28:31
 
Karl Karl

Karl Karl

10/02/2011 19:43:39
Quote Anchor link
Het punt is nu dus dat je in plaats van een icoontje te laten verschijnen eentje wilt aanpassen?
 
Tim Kampherbeek

Tim Kampherbeek

10/02/2011 19:45:09
Quote Anchor link
Iets betere uitleg aub
 
Mik PHP

Mik PHP

10/02/2011 19:57:51
Quote Anchor link
@karl

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.
 
Vincent Huisman

Vincent Huisman

10/02/2011 20:02:22
Quote Anchor link
met de jquery load() heb je daar geen last van hoor
 
Maarten PHP

Maarten PHP

10/02/2011 20:09:44
Quote Anchor link
cursor irritant kan je toch de cursor daarvan met css aanpassen
 
Mik PHP

Mik PHP

10/02/2011 20:14:43
Quote Anchor link
@vincent

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
 
Kris Peeters

Kris Peeters

11/02/2011 11:12:31
Quote Anchor link
Wat je doet:
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
 
Mik PHP

Mik PHP

11/02/2011 15:01:03
Quote Anchor link
@kris
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.
 
Mik PHP

Mik PHP

12/02/2011 17:55:49
Quote Anchor link
Niemand?
 
Mik PHP

Mik PHP

27/02/2011 04:08:23
Quote Anchor link
?? hhh??
 
Vincent Huisman

Vincent Huisman

27/02/2011 08:53:46
Quote Anchor link
had je niet in die 16 dagen zelf al wat kunnen vinden zoals de jquery documentation?
 
Kris Peeters

Kris Peeters

27/02/2011 11:45:09
Quote Anchor link
Ik zal een voorbeeld geven

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)
PHP script in nieuw venster Selecteer het PHP script
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
<?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>'
;
}

?>


js.js
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
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 ();
}


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
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.