[Ajax/JS] Comment faire ce genre de saisie ? [Résolu]

[Monkey_D.Luffy]

Bonsoir,

J'ai vu un formulaire dans lequel l'utilisateur commence par saisir un chiffre pour le code postal, et cela affiche en liste pré-saisie toutes les communes de France dont le code postal commence par le chiffre en question.
On m'a dit que ça se faisait en Ajax, mais ce que je voudrais savoir, c'est comment ? Est-ce possible sans framework ? Faut-il se connecter à une base de données pour avoir toutes les villes ? Est-ce compliqué ?
Merci.

[franculo_caoulene]

Salut,

Je n'ai pas trouvé d'exemple sur dvp. Fais une recherche sur google avec pour mot clé "autocompletion" ou "autocomplete"

[Monkey_D.Luffy]

Merci, je ne connaissais pas le terme à cela.
J'ai trouvé cela sur Dvp :
http://dcabasson.developpez.com/arti...as-a-pas/#L1-A

Mais le contenu php me fait un peu peur. Est-ce qu'il vaut mieux chercher un autre exemple, ou le php est-il transposable en Java ?

[franculo_caoulene]

Si tu sais faire une boucle en Java et afficher un résultat t'as tout en main.

[Monkey_D.Luffy]

Ah ça je sais faire : me connecter à la base, et récupérer toutes les villes.
Donc si je comprend bien, sur le lien, j'ai juste à changer le code php en Java, et ranger dans la variable $liste toutes les communes ? Tout le reste je garde tel quel ?

Désolé, je débute vraiment dans ce qui est développement web, et quand c'est autre chose que de la prog je suis perdu. ^^

[franculo_caoulene]

Ce ne sera pas forcément un copier/coller strict, mais en gros oui.

[younid]

Envoyé par Monkey_D.Luffy

Mais le contenu php me fait un peu peur. Est-ce qu'il vaut mieux chercher un autre exemple, ou le php est-il transposable en Java ?

Bonjour,

Il n'y a aucune restriction concernant le langage utilisé coté serveur, l'essentiel est que le serveur soit en mesure de fournir la réponse attendue par le script de la page cliente.

Tu défini ton protocole d'échange entre le script Ajax de l'autocomplétion coté client et la page chargée de fournir les données coté serveur et après libre à toi d'utiliser la technologie que tu veux.

[Monkey_D.Luffy]

Ok merci pour les conseils.

J'avais commencé à travailler sur le lien que j'avais posté. En cas de difficulté, j'essaierai les autres.

Envoyé par younid

Il n'y a aucune restriction concernant le langage utilisé coté serveur, l'essentiel est que le serveur soit en mesure de fournir la réponse attendue par le script de la page cliente.

Ah intéressant. J'espère que côté client ça ne changera rien selon que je fasse la requête sur un serveur en .java.

Le seul truc qui m'inquiète, c'est de savoir si dans ce code :

Code HTML :

_xmlHttp.open("GET",_adresseRecherche+"?debut="+valeur,true);

_adresseRecherche peut être ou non un .java, qui exécuterait alors un doGet.

[younid]

Envoyé par Monkey_D.Luffy

Le seul truc qui m'inquiète, c'est de savoir si dans ce code :

Code HTML :

_xmlHttp.open("GET",_adresseRecherche+"?debut="+valeur,true);

_adresseRecherche peut être ou non un .java, qui exécuterait alors un doGet.

_adresseRecherche doit être une url valide et retourner une réponse compréhensible par ton script coté client. Le meilleurs test c'est de saisir directement cette adresse sur ton navigateur (attention aux paramètres en POST ou GET) et de voir si la réponse est correct... sinon faire un affichage de la reponse dans un DIV afin de la contrôler avant faire la suite du traitement par le script client. Un simple test unitaire mais qui vaut son pesant d'or

[Monkey_D.Luffy]

Ok merci, je teste ça dès que j'ai fini de coder le doGet.

[younid]

Une page intéressante pour le cote Java :
http://www.jmdoudoux.fr/java/dej/chap055.htm

Et pour rigoler un peu, c'est la pause :

[Monkey_D.Luffy]

Lol.

Merci pour le lien, je regarde sur le site de Java Blueprint.
Je n'arrive pas à remplacer le options.php par Villes.java dans la solution donnée sur DVP.

Voici mon code Java :

Code Java :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        String debut;
        try {
                //out.println("<%@page contentType='text/html' pageEncoding='UTF-8'%>");
                out.println(("<?xml version='1.0' encoding='UTF-8' ?><options>"));
                if(request.getParameter("debut") != null)
                    debut = request.getParameter("debut");
                else 
                    debut = "";
                String liste = "liste";
 
                    out.println("<options><option>Ligne1</option></options>");
 
        } finally { 
            out.close();
        }
    }

Et voici le bout de JavaScript modifié :

Code JavaScript :

1
2
3
4
5
6
7
8
9
10
var _adresseRecherche = "http://localhost:8084/Sos_PtV1/Villes" //l'adresse � interroger pour trouver les suggestions
 
function callSuggestions(valeur){
  if(_xmlHttp&&_xmlHttp.readyState!=0){
    _xmlHttp.abort()
  }
  _xmlHttp=getXMLHTTP();
  if(_xmlHttp){
    //appel � l'url distante
    _xmlHttp.open("GET",_adresseRecherche+"?debut="+valeur,true);

Vous pensez que c'est mort pour faire fonctionner le tout avec du Java, ou bien il y a d'autres modifs à effectuer ?
Merci.

[Monkey_D.Luffy]

Bon alors ça avance, j'ai trouvé un autre script.

L'ennui, c'est que seuls les 180 premières communes sont présentes en auto-saisies. Je ne peux pas vraiment faire plus.
En gros, je parcours toute la base, je récupère toutes les communes dans une array, et c'est cette array qui sera parcourue lors de la pré-saisie.
Voici le bout de code :

Code Java :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
out.println("<script>");
         out.println("var suggests = \"\"");
         if(res2.next()) {
             Code_postal = res2.getString("Code_postal");
             if(Code_postal.length()<5)
                 Code_postal = "0" + Code_postal;
             Commune = res2.getString("Commune");
             out.println("suggests = new Array('" + Code_postal + "  " + Commune + "'");
         }
 
         for(int i = 0; i<180; i++) {
             Code_postal = res2.getString("Code_postal");
             if(Code_postal.length()<5)
                 Code_postal = "0" + Code_postal;
             Commune = res2.getString("Commune");
             out.println(", '" + Code_postal + "  " + Commune + "'");
             res2.next();
         }
         out.println(");");
         out.println("</script>");

Donc y aurait-il un moyen en JavaScript d'avoir une array de taille quasi illimitée ?
Ou bien, toujours en JavaScript, peut-on se connecter à une base JDBC ?

[franculo_caoulene]

Si tu as un problème venant du langage serveur, il faut poser la question dans le bon forum. Ici c'est plutôt tourné vers Javascript et l'objet XMLHttpRequest lui même.

[Monkey_D.Luffy]

Et bien en fait le problème est + du côté client et en JavaScript. Côté serveur, je ne pense pas avoir de soucis. Le type Array a-t-il une limite en nombre d'éléments ?
Et le JavaScript ne permet pas de faire des requêtes vers un serveur ?

[younid]

Envoyé par Monkey_D.Luffy

Et voici le bout de JavaScript modifié :

Code JavaScript :

Vous pensez que c'est mort pour faire fonctionner le tout avec du Java, ou bien il y a d'autres modifs à effectuer ?
Merci.

Est-ce que le fait de saisir l'adresse suivante donne quelque chose sur ton navigateur ?

Code :

http://localhost:8084/Sos_PtV1/Villes?debut=UNCODEPOSTAL

[Monkey_D.Luffy]

Oui. Cela exécute le doGet de ma servlet.
Mais j'ai abandonné cette solution, je n'arrivais pas à la faire fonctionner.

Mais est-il possible d'inclure une page Php dans un projet web Netbeans ? Si oui, je pourrais m'y remettre.

[Monkey_D.Luffy]

Je voudrais savoir, comment être sûr que lors de l'exécution de cette ligne, _adresseRecherche est valide ou non ?

Code Ajax :

_xmlHttp.open("GET",_adresseRecherche+"?debut="+valeur,true);

Lorsque je mets un fichier php dans _adresseRecherche, cela fonctionne mais me renvoie false.
Quand je mets un autre fichier (.jsp par exemple), cela ne fonctionne pas et me renvoie true.

[Monkey_D.Luffy]

Problème résolu. J'avais pas configuré la réponse de la servlet en text/xml.

[franculo_caoulene]

Un petit tag [Résolu] en titre en cliquant sur le bouton ne serait pas superflu.