Programmer une fonction basique en AJAX

[WebRankInfo]

Comme vous le savez peut-être, je cherche à éviter que l'on crée une discussion dans ce forum alors que le même sujet a déjà été traité (parfois le même jour...).

Pour cela, ce serait bien de pouvoir afficher le "fameux" rectangle vert des discussions similaires qui s'affiche pour l'instant en bas d'une page de discussions. Ce rectangle ne s'affiche qu'une fois qu'on a posté, je voudrais donc pouvoir l'afficher avant, dans le formulaire de saisie d'une nouvelle discussion.

J'ai donc pensé à ajouter un bouton (ou un lien texte) à côté du champ "Sujet". Un clic sur ce bouton afficherait une liste de discussions similaires au sujet indiqué (si le système en trouve).

De manière à ne pas recharger la page, j'aimerais le faire en AJAX... mais je n'y connais rien de rien. Alors avant de me lancer à éplucher des tutoriels entiers pour faire juste ça, je tente ma chance en posant la question ici, en espérant que certains parmi vous l'ont déjà fait et pourront me donner quelques lignes de code.

Merci d'avance !

[LeMulotNocturne]

c'est hyper simple en fait.

1- tu fais un script en php (par exemple) qui prend en paramètre le ou les mots clefs et qui renvoi le resultat sous la forme d'un flux html (une page web quoi).

2- tu créé un objet XMLHttpRequest et tu invoque sa méthode open sur un onClick de bouton par ex. pour aller interroger ta base via le script developpé en 1)

3- tu affiche le flux html lu en retour avec la méthode responseText dans un div.

et hop !...
J'ai un exemple codé qui colle pas trop mal à ce que tu veux faire si tu veux. N'hésites pas à me contacter en MP si besoin.

[WebRankInfo]

effectivement je veux bien ton exemple de code !

[Ron56]

effectivement je veux bien ton exemple de code !

Je suis egalement interéssé

[LeMulotNocturne]

le voici le voila...

Code: Tout sélectionner

function createHTTPObject() {
   var objHTTP = null;
   
   if (typeof XMLHttpRequest != 'undefined') {
      try {
         // Native XML support (Firefox, etc...)
         objHTTP = new XMLHttpRequest();
      }
      catch (e1) {}
   }
   else {
       try {
         // Internet Explorer support (new library)
         objHTTP = new ActiveXObject("Msxml2.XMLHTTP");
      }
      catch (e2) {
         try {
            // Internet Explorer support (old library)
              objHTTP = new ActiveXObject("Microsoft.XMLHTTP");
           }
         catch (e3) {}
        }
   }

   return objHTTP;
}

var _objHTTPCustomers = createHTTPObject();

function refreshCustomers() {

   _objHTTPCustomers.open('GET', '/admin/livemonitor/livemonitor.php?task=viewcustomers&UID=' + getUID(), true);
   _objHTTPCustomers.onreadystatechange = function() {
          if (_objHTTPCustomers.readyState == 4) {
         if (_objHTTPCustomers.status == 200) {
               customersFrame.document.write(_objHTTPCustomers.responseText);
               customersFrame.document.close();
         }
         else {
            alert('Error: refreshCustomers failed !\r\nReason : ' + _objHTTPCustomers.statusText);
         }   
        }
   }

   _objHTTPCustomers.send(null);
   setTimeout('refreshCustomers();', 10000);
}




le passage interessant est dans refreshCustomers. Moi j'écrit dans une iframe mais tu peux écrire dans un div de la même manière. Dans mon cas, ca me permet de rafraichir en douceur toutes les 10 secondes la liste des clients connectés sur instantseller. La liste est crée au format html par le script livemonitor.php.

PS: J'ai épuré le code des lignes inutiles dans notre cas pour plus de clarté.

[TOMHTML]

pour dire à quel point 'AJAX" est "nouveau" : l'autre jour je feuilletais les bouquins informatiques à Auchan quand je suis tombé sur un pavé consacré au JavaScript.
J'ai recherché "XMLHttpRequest ".
Résultat ?
"XMLHttpRequest : inusité"

[spidetra]

Pourquoi ne pas tester une librairie comme sajax ?
http://www.modernmethod.com/sajax/index.phtml

Jamais testé, donc je ne sais pas ce que ça vaut. Mais ça à l'air assez simple.
Il ya de plus en plus de framework ajax :
rialto, HTML_Ajax ( Pear ), TiniAjax ( php5 ), xajax et pleins d'autres.

sajax a l'air très simple et de correspondre à ce que tu cherche

voici l'exemple qui est donné sur le site

Code: Tout sélectionner

<?
   require("Sajax.php");
   
   function multiply($x, $y) {
      return $x * $y;
   }
   
   sajax_init();
   // $sajax_debug_mode = 1;
   sajax_export("multiply");
   sajax_handle_client_request();
   
?>
<html>
<head>
   <title>Multiplier</title>
   <script>
   <?
   sajax_show_javascript();
   ?>
   
   function do_multiply_cb(z) {
      document.getElementById("z").value = z;
   }
   
   function do_multiply() {
      // get the folder name
      var x, y;
      
      x = document.getElementById("x").value;
      y = document.getElementById("y").value;
      x_multiply(x, y, do_multiply_cb);
   }
   </script>
   
</head>
<body>
   <input type="text" name="x" id="x" value="2" size="3">
   *
   <input type="text" name="y" id="y" value="3" size="3">
   =
   <input type="text" name="z" id="z" value="" size="3">
   <input type="button" name="check" value="Calculate"
      onclick="do_multiply(); return false;">
</body>
</html>


Rialto
HTML_Ajax
tinyAjax
Xajax

[WebRankInfo]

j'ai réussi à faire ce que je veux grâce à ton exemple spidetra (merci aussi à LeMulotNocturne pour son aide).

malheureusement passer d'une page de test toute simple au système de templates de phpBB, c'est une autre paire de manches !
Je ne vois pas bien comment inclure le code qui commence par

Code: Tout sélectionner

<script>
   <?
   sajax_show_javascript();
   ?>

à l'intérieur du template posting_body.tpl car ce code contient du PHP

si quelqu'un a une idée...

[billyboylindien]

nan je m'auto slap, pour l'execution du php je sors.

[WebRankInfo]

nan je m'auto slap, pour l'execution du php je sors.

j'ai rien capté... je vais aller dormir, je comprendrai peut-être demain

[billyboylindien]

j'avais ecrit quelques debilitées dont jai eu honte je les ai virées

[jer2701]

question ! pour un ... pas champion du tout ..
"Ajax" en autodidacte (pour quelqu'un qui capte bien php) c'est faisable ou ... c'est chaud .. chaud ... ???

Vous allez me dire "tout dépend de ce que tu veux en faire !!"

certe ... des choses simples ...

un utilisateur .. une image ... lui faire éditer du texte (couleur, police).. lui faire positionner le texte sur l'image ... etc .. ce genre de choses pour commencer...

(scuse modérateur .. je suis certainement hors sujet là) mais je voulais profiter de la vague..

[LeMulotNocturne]

passer d'une page de test toute simple au système de templates de phpBB, c'est une autre paire de manches !
Je ne vois pas bien comment inclure le code qui commence par

Code: Tout sélectionner

<script>
   <?
   sajax_show_javascript();
   ?>

C'est pour ça que je t'ai orienté vers une solution sans librairie. Il est très clair que pour développer une application AJAX depuis le départ, c'est la solution de spidetra qui est la meilleure, et de loin.

Par contre, pour un truc complexe dejà développé (comme WRI), je pense qu'il vaut mieux rester sur ma solution car elle moins intrusive dans le code deja en place (pas de lib, pas de modif du head, script php séparé de l'existant, etc...).

Bon, on va y arriver !... courage !

en premier lieu Olivier, developpe un script que l'on va appeler viewrelatedtopics.php par ex, et qui prend une variable "subject" en paramètre. Ce script doit faire la recherche dans la bd et renvoyer les resultats sous la forme html, mais sans les tags <html>, <head> et <body>, car la finalité de ce code est d'être visualisé dans un div. OK ?

Quand c'est ok, reposte un coup pour prévenir ou passe moi un MP si tu préfère, on passera alors à l'étape no2.

Courage !

[spidetra]

Code: Tout sélectionner

<script>
   <?
   sajax_show_javascript();
   ?>

à l'intérieur du template posting_body.tpl car ce code contient du PHP

si quelqu'un a une idée...

Il n'est pas possible dans les templates php de parser des appels à des fonctions du style {ajax}

Tu pourrais modifier l'implémentation de function sajax_show_javascript()
comme ça :

Code: Tout sélectionner

function sajax_show_javascript()
   {
      echo sajax_get_javascript();
   }


par

Code: Tout sélectionner

function sajax_show_javascript()
   {
      return sajax_get_javascript();
   }


Je ne suis pas du tout familier aves les systèmes de template en php, doc je ne sais pas si c'est possible

[MarvinLeRouge]

Salut,

Je te conseillerai de rafraîchir la liste à la frappe, plutôt que sur clic. Ainsi, l'utilisateur voit en même temps qu'il tape les sujets en rapport. Il ne risque pas d'oublier de cliquer sur le bouton "voir les sujets en rapport".