Programmer une fonction basique en AJAX

[cybervince]

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...).

Ca fait quelques mois que j'ai pensé à ca, et le jour où j'ai découvert ce qu'était l'AJAX et ce qu'on pouvait faire avec, j'ai dit: Bingo !!!
Par contre je suis comme toi, je n'y comprend rien (j'ai pas encore cherché à comprendre par manque de temps), mais ce qui est certain c'est que je vais suivre ce post de près, voulant implémenter ca sur mon forum.

[LeMulotNocturne]

perso ca ne marche toujours pas chez moi (IE et firefox).
J'ai jeté un oeil au source html et je n'ai strictement rien trouvé qui ressemble de près ou de loin à de l'AJAX...

Par exemple, le code du champ sujet est on ne peut plus banal, alors que j'imagine qu'il devrait comporter une méthode onBlur (pour déclencher la recherche ) ?

Code: Tout sélectionner

  <td class="row2" width="78%"> <span class="gen">
      <input type="text" name="subject" size="45" maxlength="60" style="width:450px" tabindex="2" class="post" value="" />

      </span> </td>

J'ai bien sur rechargé complètement la page au cas ou le cache ferait des farces...

[WebRankInfo]

voilà le code : d'abord un javascript

Code: Tout sélectionner

<script type="text/javascript">
      
      // remote scripting library
      // (c) copyright 2005 modernmethod, inc
      var sajax_debug_mode = false;
      var sajax_request_type = "GET";
      var sajax_target_id = "";
      var sajax_failure_redirect = "";
      
      function sajax_debug(text) {
         if (sajax_debug_mode)
            alert(text);
      }
      
      function sajax_init_object() {
         sajax_debug("sajax_init_object() called..")
         
         var A;
         
         var msxmlhttp = new Array(
            'Msxml2.XMLHTTP.5.0',
            'Msxml2.XMLHTTP.4.0',
            'Msxml2.XMLHTTP.3.0',
            'Msxml2.XMLHTTP',
            'Microsoft.XMLHTTP');
         for (var i = 0; i < msxmlhttp.length; i++) {
            try {
               A = new ActiveXObject(msxmlhttp[i]);
            } catch (e) {
               A = null;
            }
         }
         
         if(!A && typeof XMLHttpRequest != "undefined")
            A = new XMLHttpRequest();
         if (!A)
            sajax_debug("Could not create connection object.");
         return A;
      }
      
      var sajax_requests = new Array();
      
      function sajax_cancel() {
         for (var i = 0; i < sajax_requests.length; i++)
            sajax_requests[i].abort();
      }
      
      function sajax_do_call(func_name, args) {
         var i, x, n;
         var uri;
         var post_data;
         var target_id;
         
         sajax_debug("in sajax_do_call().." + sajax_request_type + "/" + sajax_target_id);
         target_id = sajax_target_id;
         if (typeof(sajax_request_type) == "undefined" || sajax_request_type == "")
            sajax_request_type = "GET";
         
         uri = "/forums/posting.php?mode=newtopic&f=33";
         if (sajax_request_type == "GET") {
         
            if (uri.indexOf("?") == -1)
               uri += "?rs=" + escape(func_name);
            else
               uri += "&rs=" + escape(func_name);
            uri += "&rst=" + escape(sajax_target_id);
            uri += "&rsrnd=" + new Date().getTime();
            
            for (i = 0; i < args.length-1; i++)
               uri += "&rsargs[]=" + escape(args[i]);

            post_data = null;
         }
         else if (sajax_request_type == "POST") {
            post_data = "rs=" + escape(func_name);
            post_data += "&rst=" + escape(sajax_target_id);
            post_data += "&rsrnd=" + new Date().getTime();
            
            for (i = 0; i < args.length-1; i++)
               post_data = post_data + "&rsargs[]=" + escape(args[i]);
         }
         else {
            alert("Illegal request type: " + sajax_request_type);
         }
         
         x = sajax_init_object();
         if (x == null) {
            if (sajax_failure_redirect != "") {
               location.href = sajax_failure_redirect;
               return false;
            } else {
               sajax_debug("NULL sajax object for user agent:\n" + navigator.userAgent);
               return false;
            }
         } else {
            x.open(sajax_request_type, uri, true);
            // window.open(uri);
            
            sajax_requests[sajax_requests.length] = x;
            
            if (sajax_request_type == "POST") {
               x.setRequestHeader("Method", "POST " + uri + " HTTP/1.1");
               x.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            }
         
            x.onreadystatechange = function() {
               if (x.readyState != 4)
                  return;

               sajax_debug("received " + x.responseText);
            
               var status;
               var data;
               var txt = x.responseText.replace(/^\s*|\s*$/g,"");
               status = txt.charAt(0);
               data = txt.substring(2);

               if (status == "") {
                  // let's just assume this is a pre-response bailout and let it slide for now
               } else if (status == "-")
                  alert("Error: " + data);
               else {
                  if (target_id != "")
                     document.getElementById(target_id).innerHTML = eval(data);
                  else {
                     try {
                        var callback;
                        var extra_data = false;
                        if (typeof args[args.length-1] == "object") {
                           callback = args[args.length-1].callback;
                           extra_data = args[args.length-1].extra_data;
                        } else {
                           callback = args[args.length-1];
                        }
                        callback(eval(data), extra_data);
                     } catch (e) {
                        sajax_debug("Caught error " + e + ": Could not eval " + data );
                     }
                  }
               }
            }
         }
         
         sajax_debug(func_name + " uri = " + uri + "/post = " + post_data);
         x.send(post_data);
         sajax_debug(func_name + " waiting..");
         delete x;
         return true;
      }
      
            
      // wrapper for ajax_encadre_topics_related      
      function x_ajax_encadre_topics_related() {
         sajax_do_call("ajax_encadre_topics_related",
            x_ajax_encadre_topics_related.arguments);
      }
      
      function set_data(result) {
document.getElementById("related_topics").innerHTML = result;
}
function get_data() {
var q;
q = document.getElementById("subject").value;
x_ajax_encadre_topics_related(q, set_data);
}
</script>

ensuite dans le formulaire, je modifie légèrement le code pour obtenir ceci :

Code: Tout sélectionner

<input type="text" name="subject" id="subject" size="45" maxlength="60" style="width:450px" tabindex="2" class="post" value="" onchange="get_data(); return false;"/>
      </span><br />
    <div id="related_topics"></div>

je ne comprends toujours pas pourquoi ça marche chez certains et pas chez d'autres...

[spidetra]

rien chez moi.

1. C'est bien le script posting.php?mode=newtopic&f=xx (xx = n° du forum ) ?

2. Rien dans le code source pour moi. Les fonctions ajax sont absente.
=> View source
=> Edit -> recherche -> Ajax => Aucune occurence trouvé

[WebRankInfo]

oui c'est http://www.webrankinfo.com/forums/posti ... topic&f=33 par exemple

cette page contient le code spécial AJAX dès lors que le formulaire est appelé pour créer un nouveau topic, ce qui est le cas dans l'exemple ici

edit : ceux qui ne voient rien sont sans doute avec l'ancien design de WRI ! je vais l'ajouter dans l'ancien car pour l'instant je ne l'avais mis que dans wri_v3

[Suede]

Quel style tu as ? Olivier n'a peut etre pas modifier tous nles themes?

Dans mon cas, j'ai bien la boite qui s'affiche.
Mais le mon curseur reste dans le titre meme si j'ai cliqué dans la boite du message.
Pire, si je m'enerve et que je clique plusieurs fois dans la boite message, il refait un test ajax (bah oui, vu que je change de box)

Sur FF, ca marche

[spidetra]

edit : ceux qui ne voient rien sont sans doute avec l'ancien design de WRI ! je vais l'ajouter dans l'ancien car pour l'instant je ne l'avais mis que dans wri_v3

Voilà tu as trouvé ta réponse
conclusion : imposer un seul thème à tout le monde

[WebRankInfo]

ça y est je l'ai mis dans l'autre theme

[spidetra]

ok ça marche avec les 2 thèmes.
On pourra connaître la solution que tu as retenu pour implémenter sajax ?

[WebRankInfo]

la solution est donnée dans mon post juste avant !
j'ai gardé la bibliothèque SAJAX et changé la fonction qui faisait un echo pour qu'elle fasse un return, de manière à pouvoir l'inclure dans phpBB.

le hic c'est que j'inclue du JavaScript en dehors dans le body et non dans le head, je crois que c'est pas très correct mais tant pis.

il me reste à bien choisir le seuil de pertinence pour n'afficher que les discussions vraiment similaires, et surtout régler le pb des lettres accentuées, si quelqu'un a une idée pour ce dernier point je suis preneur...

[Pilounet]

En tout cas, l'Ajax me parait tres tres lourd ... meme pour creer une toute petite fonction comme celle ci !!
C'est un peu dommage !

[LeMulotNocturne]

En tout cas, l'Ajax me parait tres tres lourd ... meme pour creer une toute petite fonction comme celle ci !!
C'est un peu dommage !

c'est clair ! mais y'avait plus simple, sans utiliser de librairie, comme dans mon exemple de début de post. Pour le cas présent, c'est vrai que c'est lourd (au sens de la longueur de code ! ) d'utiliser la lib sajax juste pour ça.

en tout ca y est ! ca marche chez moi maintenant !

[WebRankInfo]

ça semble lourd quand on regarde le code généré, mais en terme d'utilisation ce n'est pas si horrible

par contre ça ne semble pas fonctionner correctement partout puisque certains disent que ça leur bloque le formulaire

[Bourriquet]

Moi je répète que j'ai trouvé une petite classe sympa qui permet de limiter la complexité d'une appli Ajax à :

appeller une fonction qui rappelle une autre fonction une fois que la page demandée est chargée.

[thierry8]

Moi je répète que j'ai trouvé une petite classe sympa qui permet de limiter la complexité d'une appli Ajax à :

appeller une fonction qui rappelle une autre fonction une fois que la page demandée est chargée.

Je suis preneur.

Sinon, pour moi, ça fonctionne de temps en temps...
Je pense donc, que c'est un comportement normal en fonction du résultat.
J'ai FireFox 1.5.

EDIT: pour ceux qui disent que ça bloque, en êtes vous certain ?
Il arrive qu'il y ai un petit blocage, mais il suffit de cliquer dans le texarea, puis de revenir sur le titre.