IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

AJAX Discussion :

[AJAX] lier deux liste déroulante JSP + AJAX+ ORACLE


Sujet :

AJAX

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Inscrit en
    Mars 2009
    Messages
    153
    Détails du profil
    Informations forums :
    Inscription : Mars 2009
    Messages : 153
    Par défaut [AJAX] lier deux liste déroulante JSP + AJAX+ ORACLE
    Bonjour,

    Je possède deux listes déroulantes qui se remplissent automatiquement a l'aide d'une base de donnée.


    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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
     
    <td><select name = "type voie" id ="type voie" style="width : 120px"> 
    <%
    	DBConnexion dbc_typeVoie = new DBConnexion();
    	String sql_typeVoie = "SELECT DISTINCT nom_type_voie FROM adresse";
    	ResultSet resultat_typeVoie = dbc_typeVoie.recupereRequete(sql_typeVoie);
    	while(resultat_typeVoie.next())
    	{
    		out.print("<option>"+resultat_typeVoie.getString("nom_type_voie")+"</option>");
    	}
    	dbc_typeVoie.closeConnexion();
     
    %>
    </select></td>
    <td><select name = "nom voie" id ="nom voie"style="width : 160px">
    <%
    	DBConnexion dbc_nomVoie = new DBConnexion();
    	String sql_nomVoie = "SELECT DISTINCT nom_voie FROM adresse";
    	ResultSet resultat_nomVoie = dbc_nomVoie.recupereRequete(sql_nomVoie);
    	while(resultat_nomVoie.next())
    	{
    		out.print("<option>"+resultat_nomVoie.getString("nom_voie")+"</option>");
    	}
    	dbc_nomVoie.closeConnexion();
    %>
    </select></td>
    je voudrai les lié en sorte de sorte que lorsque que je choisi un élément dans la premiere liste déroulante, je voudrai récupérer cette valeur pour pouvoir faire ma deuxieme requete pour pouvoir remplir ma deuxieme liste déroulante. Je voudrai que ceci soit fait sans recharger la page donc on m'a dit d'utiliser le javascript et l'ajax. Je programme en JSP sans servlet. J'ai déja commencé a faire le script mais sans succes je sais pas comment l'intégré. On m'a également parler de faire un objet JSON pour pouvoir faire ma deuxième requête. Si quelqu'un pourrai m'aider car je comprend pas trop


    Voici la script que j'ai commencé:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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
    65
    66
    67
    68
    69
    70
    71
    72
     
    /* Création de la variable globale qui contiendra l'objet XHR */
    var requete = null;
     
    function creerRequete()
    {
        try
        {
            /* On tente de créer un objet XmlHTTPRequest */
            requete = new XMLHttpRequest();
        }
        catch (microsoft)
        {
            /* Microsoft utilisant une autre technique, on essays de créer un objet ActiveX */
            try
            {
                requete = new ActiveXObject('Msxml2.XMLHTTP');
            }
            catch(autremicrosoft)
            {
                /* La première méthode a échoué, on en teste une seconde */
                try
                {
                    requete = new ActiveXObject('Microsoft.XMLHTTP');
                }
                catch(echec)
                {
                    requete = null;
                }
            }
        }
        if(requete == null)
        {
            alert('Impossible de créer l\'objet requête,\nVotre navigateur ne semble pas supporter les object XMLHttpRequest.');
        }
     
     
    }
    /**
     * Fonction privée qui va mettre à jour l'affichage de la page.
     */
     
     function actualiserNomVoie()
    {
        var listeNomVoie = requete.responseText;
        var blocListe = document.getElementById('nom_voie');
        blocListe.innerHTML = listeNomVoie;
    }
     
     
     
    function getDepartements(idr)
    {
            var blocListe = document.getElementById('nom_voie');
            /* On crée l'objet XHR */
            creerRequete();
            /* Définition du fichier de traitement */
            var url = "test.jsp"
     
            /* Envoi de la requête à la page de traitement */
     
            requete.open('GET', url, true);
     
            requete.onreadystatechange = function()
     
            /* Mise à jour de l'affichage, on appelle la fonction apropriée */
     
    		actualiserNomVoie();
     
            requete.send(null);
     
    }

    Si quelqu'un peut m'aider a réaliser cela.
    Merci d'avance

  2. #2
    Membre Expert
    Avatar de gwyohm
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Octobre 2007
    Messages
    925
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Octobre 2007
    Messages : 925
    Par défaut
    Bonjour,

    Tu ne peux pas changer le contenu d'un select via un innerHTML. Je te recommande une petite lecture
    http://javascript.developpez.com/faq...js#listesLiees

  3. #3
    Membre confirmé
    Inscrit en
    Mars 2009
    Messages
    153
    Détails du profil
    Informations forums :
    Inscription : Mars 2009
    Messages : 153
    Par défaut
    mais a quel moment on recupérer la valeur de la premiere liste déroulante? Car j'en ai besoin pour compléter ma deuxieme requete pour compléter ma deuxieme liste déroulante?

  4. #4
    Membre confirmé
    Inscrit en
    Mars 2009
    Messages
    153
    Détails du profil
    Informations forums :
    Inscription : Mars 2009
    Messages : 153
    Par défaut
    J'ai tester le code que tu m'a mis en lien, sur ce que j'ai compris, il fait des insertion de ses tableau dans les select?

  5. #5
    Membre Expert
    Avatar de gwyohm
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Octobre 2007
    Messages
    925
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Octobre 2007
    Messages : 925
    Par défaut
    Le mieux est d'attendre que la sélection change, donc d'écouter l'événement onchange.

  6. #6
    Membre confirmé
    Inscrit en
    Mars 2009
    Messages
    153
    Détails du profil
    Informations forums :
    Inscription : Mars 2009
    Messages : 153
    Par défaut
    Désolé mais je n'ai pas très bien saisie ce que tu m'a dit.

  7. #7
    Membre Expert
    Avatar de gwyohm
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Octobre 2007
    Messages
    925
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Octobre 2007
    Messages : 925
    Par défaut
    Tu dois probablement faire quelque chose comme
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    <select onchange="getDepartements(this.value)">
    A chaque changement de la valeur de ce select, la fonction getDepartements est appelée avec la valeur sélectionnée en paramètre

  8. #8
    Membre confirmé
    Inscrit en
    Mars 2009
    Messages
    153
    Détails du profil
    Informations forums :
    Inscription : Mars 2009
    Messages : 153
    Par défaut
    oui j'ai fais

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
     
    <script language="javascript">
    function getTypeVoie(selTypeVoie)
    {
    	var type_voie=selTypeVoie.value;
    }					
    </script>
    et dans mon input
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    <input type="text" id = "numVoie" name="numVoie" onchange = "getTypeVoie(this.value)"/>

  9. #9
    Membre Expert
    Avatar de gwyohm
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Octobre 2007
    Messages
    925
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Octobre 2007
    Messages : 925
    Par défaut
    Attention tu demandes 2 fois la valeur ! La deuxième fois ca ne fonctionnera pas !

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    <script language="javascript">
    function getTypeVoie(selTypeVoie)
    {
    	var type_voie=selTypeVoie.value;
    }					
    </script>
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    <input type="text" id = "numVoie" name="numVoie" onchange = "getTypeVoie(this.value)"/>
    L'un des 2 est à supprimer...

  10. #10
    Membre confirmé
    Inscrit en
    Mars 2009
    Messages
    153
    Détails du profil
    Informations forums :
    Inscription : Mars 2009
    Messages : 153
    Par défaut
    meme la 1er fois ça ne marche pas puisque quand je fais une

    alert("type_voie")
    sa me met undefined

  11. #11
    Membre Expert
    Avatar de gwyohm
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Octobre 2007
    Messages
    925
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Octobre 2007
    Messages : 925
    Par défaut
    Les options du select sont générées sans value...
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <select name = "type voie" id ="type voie" style="width : 120px"> <%
    DBConnexion dbc_typeVoie = new DBConnexion();
    String sql_typeVoie = "SELECT DISTINCT nom_type_voie FROM adresse";
    ResultSet resultat_typeVoie = dbc_typeVoie.recupereRequete(sql_typeVoie);
    while(resultat_typeVoie.next())	{
      out.print("<option>"+resultat_typeVoie.getString("nom_type_voie")+"</option>");
    }
    dbc_typeVoie.closeConnexion();
    %>
    </select>
    à compléter
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    out.print("<option value=\"" + resultat_typeVoie.getString("nom_type_voie") + "\">"+resultat_typeVoie.getString("nom_type_voie")+"</option>");
    D'ailleurs il serait plus simple d'avoir le code html généré par la jsp et non le code de la JSP

  12. #12
    Membre Expert
    Avatar de gwyohm
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Octobre 2007
    Messages
    925
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Octobre 2007
    Messages : 925
    Par défaut

    Ben tu les as
    Citation Envoyé par james23 Voir le message
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
     
    <%
    	DBConnexion dbc_nomVoie = new DBConnexion();
    	String sql_nomVoie = "SELECT DISTINCT nom_voie FROM adresse";
    	ResultSet resultat_nomVoie = dbc_nomVoie.recupereRequete(sql_nomVoie);
    	while(resultat_nomVoie.next())
    	{
    		out.print("<option>"+resultat_nomVoie.getString("nom_voie")+"</option>");
    	}
    	dbc_nomVoie.closeConnexion();
    %>
    il faut juste que tu adaptes ta requetes. Ta JSP test.jsp doit ressembler à ca :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
     
    <%
    DBConnexion dbc_nomVoie = new DBConnexion();
    String sql_nomVoie = "SELECT DISTINCT nom_voie FROM adresse where nom_type_voie='" + request.getParameter("type").replaceAll("'", "''") + "'";
    	ResultSet resultat_nomVoie = dbc_nomVoie.recupereRequete(sql_nomVoie);
            out.print("[");
    	while(resultat_nomVoie.next())
    	{
      out.print("{\"text\": \"" + resultat_nomVoie.getString("nom_voie").replaceAll("\"", "\\\"") + "\",\"value\":\"" + resultat_nomVoie.getString("nom_voie").replaceAll("\"", "\\\"") + "\"}");
    	}
            out.print("]");
    	dbc_nomVoie.closeConnexion();
    %>

  13. #13
    Expert éminent

    Homme Profil pro
    Inscrit en
    Janvier 2007
    Messages
    13 474
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Secteur : Finance

    Informations forums :
    Inscription : Janvier 2007
    Messages : 13 474
    Par défaut
    Citation Envoyé par gwyohm Voir le message

    Ben tu les as
    Ah oui, tiens !

    +1

    A+

Discussions similaires

  1. [AJAX] Lier deux listes déroulantes avec ajax
    Par king_soft dans le forum AJAX
    Réponses: 1
    Dernier message: 07/01/2011, 09h49
  2. Réponses: 9
    Dernier message: 09/09/2010, 13h56
  3. [AJAX] lier 1 liste déroulante à un texte
    Par xoflam dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 21/02/2008, 19h47
  4. [AJAX] lier deux listes déroulantes alimenté par une base de données (Mysql)
    Par arnaudperfect dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 23/04/2007, 01h06
  5. [AJAX] Lier une liste déroulant à un champ texte
    Par arnaudperfect dans le forum Général JavaScript
    Réponses: 10
    Dernier message: 13/04/2007, 14h50

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo