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] 3 Listes liées (combo) en JSP


Sujet :

AJAX

  1. #21
    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 RachidEL Voir le message
    correction effectuée au niveau des id,
    Non
    Citation Envoyé par E.Bzz Voir le message
    Ensuite, il ne faut pas qu'un id corresponde au name d'un autre élément de la page. Ce n'est pas une erreur en soi, mais IE confondant ID et NAME, ça lui pose un gros problème . Tu as le cas ici
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    <div id='tranche' style='display:inline'>
    <select name="tranche" onchange='change2()'>
    ainsi que dans le select suivant.
    Relis mieux ce qui a été dit (et répété) ...

    A+

  2. #22
    Membre Expert
    Avatar de emmanuel.remy
    Inscrit en
    Novembre 2005
    Messages
    2 855
    Détails du profil
    Informations personnelles :
    Âge : 57

    Informations forums :
    Inscription : Novembre 2005
    Messages : 2 855
    Par défaut
    Correction effectuée ?

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    <div id='tranche' style='display:inline'>
        <select name='tranche' onchange='change2()'>
     
    ... 
    <div id='groupement' style='display:inline'>
         <select name='groupement'>


    ERE

    EDIT: grillé !
    ----

  3. #23
    Membre averti
    Inscrit en
    Juillet 2005
    Messages
    22
    Détails du profil
    Informations forums :
    Inscription : Juillet 2005
    Messages : 22
    Par défaut
    ok, mais je croyais qu'il faut juste elever l'ID de des balises select qui été identique à l'ID des DIV ....


    bon bein maintenant je vais modifier les names des balises select et on verra...

    les amis veuillez excuser ma précipitation

  4. #24
    Membre averti
    Inscrit en
    Juillet 2005
    Messages
    22
    Détails du profil
    Informations forums :
    Inscription : Juillet 2005
    Messages : 22
    Par défaut
    j'ai modifié et ça n'a rien donné

    voici le form1.jsp aprés modif:


    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
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
     
     
    <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
        pageEncoding="ISO-8859-1"%>
    <%@ page import="java.util.Vector,java.util.Enumeration,GC.bean.Bien,
    GC.bean.Projet,GC.bean.Tranche,GC.bean.Groupement,GC.dao.GroupementDAO,
    GC.dao.ProjetDAO,java.util.*" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Insert title here</title>
    </head>
     
    <script type='text/javascript'>
    			function getXhr(){
                                    var xhr = null; 
    				if(window.XMLHttpRequest) // Firefox et autres
    				   xhr = new XMLHttpRequest(); 
    				else if(window.ActiveXObject){ // Internet Explorer 
    				   try {
    			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
    			            } catch (e) {
    			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
    			            }
    				}
    				else { // XMLHttpRequest non supporté par le navigateur 
    				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
    				   xhr = false; 
    				} 
                                    return xhr;
    			}
     
    			/**
    			* Méthode qui sera appelée sur le click du bouton
    			*/
     
    			function change()
    			{	
    			  //Si c'est AUCUN qui est sélectionné, il faut réinitialiser 
            //les 2 autres combos et quitter
    				var sel = document.getElementById('projet');
    				if (sel.options[sel.selectedIndex].value == -1) {
      					document.getElementById('tranche').options.length=0;
      					document.getElementById('groupement').options.length=0;
      					return;
            }
     
    				var xhr = getXhr();
    				// On défini ce qu'on va faire quand on aura la réponse
    				xhr.onreadystatechange = function()
    				{
    					//attendons dque le requete soit finie...
              if(xhr.readyState == 4 && xhr.status == 200){
                  //alert(xhr.responseText);
                var rst = xhr.responseXML;
      					var items=rst.getElementsByTagName('element');
      					document.getElementById('tranche').options.length=0;
      					//penser à réinitialiser aussi id_ref
                document.getElementById('groupement').options.length=0;
      					for(var i=0;i<items.length;i++)
      					{
      						var myOption = new Option(items[i].getElementsByTagName('option')[0].firstChild.nodeValue,items[i].getElementsByTagName('valeur')[0].firstChild.nodeValue,false,true)
      						document.getElementById('tranche').options[i]=myOption;
      					}
     
      					//mise à jour de id_ref pour le 1er prenom affiché (sinon incohérence
                //au niveau de l'affichage)
      					change2();
      				}
    				}
     
    				// Ici on va voir comment faire du post
    				xhr.open("POST","cmbtranche22.jsp",true);
    				// ne pas oublier ça pour le post
    				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    				// ne pas oublier de poster les arguments
    				// ici, l'id de l'auteur
    				sel = document.getElementById('projet');
    				idprojet = sel.options[sel.selectedIndex].value;
    				xhr.send("idProjet="+idprojet);			
    			}
     
    			function change2()
    			{	
    				//si un seul prenom...	
    				if (document.getElementById('prenom').options.length==1) 
    				{
    					//on vide la derniere combo
    					document.getElementById('groupement').options.length=0; 
    					//on quitte
    					return;
    				}
     
    				var xhr = getXhr();
    				// On défini ce qu'on va faire quand on aura la réponse
    				xhr.onreadystatechange = function()
    				{
    				  if(xhr.readyState == 4 && xhr.status == 200){
    					 // alert(xhr.responseText);
    					  var rst = xhr.responseXML;
      					var items=rst.getElementsByTagName('element');
      					document.getElementById('groupement').options.length=0;
      					for(var i=0;i<items.length;i++)
      					{
                 var myOption = new Option(items[i].getElementsByTagName('option')[0].firstChild.nodeValue,items[i].getElementsByTagName('valeur')[0].firstChild.nodeValue,false,true)
      						document.getElementById('groupement').options[i]=myOption;
      					}
      				}
    				}
     
    				// Ici on va voir comment faire du post
    				xhr.open("POST","cmbgroupement22.jsp",true);
    				// ne pas oublier ça pour le post
    				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    				// ne pas oublier de poster les arguments
    				// ici, l'id de l'auteur
     
    				sel2 = document.getElementById('projet');
    				idprojet = sel2.options[sel2.selectedIndex].value;
     
    				sel = document.getElementById('tranche');
    				idtranche = sel.options[sel.selectedIndex].value;
     
    				xhr.send("idProjet="+idprojet+ "&idTranche="+idtranche);		
    			}
    		</script>
     
    <body onload='change()'>
    <form  method="POST" action="NouveauBien">
    			&nbsp;<fieldset style="padding: 2">
    			<legend>Information sur le Bien</legend>
    			<b>Identificateur : <input type="text" name="id_bien" size="20"></b><p>
    			<b>GH :&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    			<input type="text" name="gh" size="20"></b></p>
     
    			</fieldset><p>&nbsp;</p>
    			<fieldset style="width: 500px">
    				<legend>Information sur Projet</legend>
     
     
    				<label>Projet</label>
     
    				<select name="projet" id='projet' onchange='change()'>
     
    <%
                Projet prj = (Projet) application.getAttribute("prj");
                Collection prjs = ProjetDAO.getProjetId();
                if (prjs != null)
                {
                    if (prjs.size() > 0)
                    {
                        for (Iterator iterator = prjs.iterator(); iterator.hasNext(); )
                        {
                            Projet prjts = (Projet) iterator.next ();
     
    %>
     
    <OPTION value ="<%=prjts.getCode_projet()%>">
    <%out.print(prjts.getLibelle());%>
     
    </OPTION> 
    <%
                        }
                    }
                  }            
    %>
    </select>
     
     
    <label>Tranche</label>
    				<div id='tranche' style='display:inline'>
    				<select name='tranche2' onchange='change2()'>
     
                      <option value='-1'>Choisir un projet</option>
     
     
    				</select>
    				</div>
     
    <label>Groupement</label>
    				<div id='groupement' style='display:inline'>
    				<select name='groupement2'>
     
                      <option value='-1'>Choisir un projet ou tranche</option>
     
     
    				</select>
    				</div>
     
    			</fieldset>
     
    <p><b>Superficie : </b>&nbsp;&nbsp;&nbsp;&nbsp;
    			<input type="text" name="superficie" size="20"></p>
    			<p>&nbsp;</p>
    			<p><input type="submit" value="Enregistrer" name="B1"></p>
    			<p>&nbsp;</p>
    			<p>&nbsp;</p>
    		</form>
     
    </body>
    </html>

  5. #25
    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 RachidEL Voir le message
    j'ai modifié et ça n'a rien donné
    parce que tu n'as pas tenu compte des références que tu utilises dans ta fonction.
    Modifie la fonction en fonction des nouveaux id et name que tu utilises ...

    (pour "tranche2" et "groupement2" tu devrais ajouter un id en plus du name, sinon ça ne fonctionnera que sous IE)

    A+

  6. #26
    Membre averti
    Inscrit en
    Juillet 2005
    Messages
    22
    Détails du profil
    Informations forums :
    Inscription : Juillet 2005
    Messages : 22
    Par défaut
    est ce comme ça qu'il faut faire :

    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
     
     
    <label>Tranche</label>
    				<div id='tranche' style='display:inline'>
    				<select name='tranche2' id='tranche' onchange='change2()'>
     
                      <option value='-1'>Choisir un projet</option>
     
     
    				</select>
    				</div>
     
    <label>Groupement</label>
    				<div id='groupement' style='display:inline'>
    				<select name='groupement2' id='groupement'>
     
                      <option value='-1'>Choisir un projet ou tranche</option>
     
     
    				</select>
    				</div>

  7. #27
    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
    Non : tu vois bien que tu as 2 fois id="tranche" ... ce qui est interdit.

    Je t'avais donné un exemple, relis-le ...

    A+

  8. #28
    Membre averti
    Inscrit en
    Juillet 2005
    Messages
    22
    Détails du profil
    Informations forums :
    Inscription : Juillet 2005
    Messages : 22
    Par défaut
    c'est ça ce que vous voulez dire ?


    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
     
     
     
     
    <label>Tranche</label>
    				<div id='tranche' style='display:inline'>
    				<select name='tranche2' onchange='change2()'>
     
                      <option value='-1'>Choisir un projet</option>
     
     
    				</select>
    				</div>
     
    <label>Groupement</label>
    				<div id='groupement' style='display:inline'>
    				<select name='groupement2' >
     
                      <option value='-1'>Choisir un projet ou tranche</option>
     
     
    				</select>
    				</div>

  9. #29
    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
    Oui, à condition que tu ais modifié dans ta fonction
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    document.getElementById('tranche')
    en
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    document.getElementById('tranche2')
    et
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    document.getElementById('groupement')
    en
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    document.getElementById('groupement2')
    Je te conseillais aussi d'ajouter
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <select name='tranche2' id='tranche2' onchange='change2()'>
    et
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <select name='groupement2' id='groupement2'>
    Sinon ça ne fonctionnera que sous IE ...

    A+

  10. #30
    Membre averti
    Inscrit en
    Juillet 2005
    Messages
    22
    Détails du profil
    Informations forums :
    Inscription : Juillet 2005
    Messages : 22
    Par défaut
    avec la solution que vous m'avez donné, les combos tranche et groupement réagissent mais elles sont vides.

  11. #31
    Rédacteur/Modérateur
    Avatar de andry.aime
    Homme Profil pro
    Inscrit en
    Septembre 2007
    Messages
    8 391
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Ile Maurice

    Informations forums :
    Inscription : Septembre 2007
    Messages : 8 391
    Par défaut
    Re,
    Fait nous voir ton code actuel.

  12. #32
    Membre averti
    Inscrit en
    Juillet 2005
    Messages
    22
    Détails du profil
    Informations forums :
    Inscription : Juillet 2005
    Messages : 22
    Par défaut
    le voilà :

    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
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
     
     
    <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
        pageEncoding="ISO-8859-1"%>
    <%@ page import="java.util.Vector,java.util.Enumeration,GC.bean.Bien,
    GC.bean.Projet,GC.bean.Tranche,GC.bean.Groupement,GC.dao.GroupementDAO,
    GC.dao.ProjetDAO,java.util.*" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Insert title here</title>
    </head>
     
    <script type='text/javascript'>
    			function getXhr(){
                                    var xhr = null; 
    				if(window.XMLHttpRequest) // Firefox et autres
    				   xhr = new XMLHttpRequest(); 
    				else if(window.ActiveXObject){ // Internet Explorer 
    				   try {
    			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
    			            } catch (e) {
    			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
    			            }
    				}
    				else { // XMLHttpRequest non supporté par le navigateur 
    				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
    				   xhr = false; 
    				} 
                                    return xhr;
    			}
     
    			/**
    			* Méthode qui sera appelée sur le click du bouton
    			*/
     
    			function change()
    			{	
    			  //Si c'est AUCUN qui est sélectionné, il faut réinitialiser 
            //les 2 autres combos et quitter
    				var sel = document.getElementById('projet');
    				if (sel.options[sel.selectedIndex].value == -1) {
      					document.getElementById('tranche2').options.length=0;
      					document.getElementById('groupement2').options.length=0;
      					return;
            }
     
    				var xhr = getXhr();
    				// On défini ce qu'on va faire quand on aura la réponse
    				xhr.onreadystatechange = function()
    				{
    					//attendons dque le requete soit finie...
              if(xhr.readyState == 4 && xhr.status == 200){
                  //alert(xhr.responseText);
                var rst = xhr.responseXML;
      					var items=rst.getElementsByTagName('element');
      					document.getElementById('tranche2').options.length=0;
      					//penser à réinitialiser aussi id_ref
                document.getElementById('groupement2').options.length=0;
      					for(var i=0;i<items.length;i++)
      					{
      						var myOption = new Option(items[i].getElementsByTagName('option')[0].firstChild.nodeValue,items[i].getElementsByTagName('valeur')[0].firstChild.nodeValue,false,true)
      						document.getElementById('tranche2').options[i]=myOption;
      					}
     
      					//mise à jour de id_ref pour le 1er prenom affiché (sinon incohérence
                //au niveau de l'affichage)
      					change2();
      				}
    				}
     
    				// Ici on va voir comment faire du post
    				xhr.open("POST","cmbtranche22.jsp",true);
    				// ne pas oublier ça pour le post
    				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    				// ne pas oublier de poster les arguments
    				// ici, l'id de l'auteur
    				sel = document.getElementById('projet');
    				idprojet = sel.options[sel.selectedIndex].value;
    				xhr.send("idProjet="+idprojet);			
    			}
     
    			function change2()
    			{	
    				//si un seul prenom...	
    				if (document.getElementById('tranche2').options.length==1) 
    				{
    					//on vide la derniere combo
    					document.getElementById('groupement2').options.length=0; 
    					//on quitte
    					return;
    				}
     
    				var xhr = getXhr();
    				// On défini ce qu'on va faire quand on aura la réponse
    				xhr.onreadystatechange = function()
    				{
    				  if(xhr.readyState == 4 && xhr.status == 200){
    					 // alert(xhr.responseText);
    					  var rst = xhr.responseXML;
      					var items=rst.getElementsByTagName('element');
      					document.getElementById('groupement2').options.length=0;
      					for(var i=0;i<items.length;i++)
      					{
                 var myOption = new Option(items[i].getElementsByTagName('option')[0].firstChild.nodeValue,items[i].getElementsByTagName('valeur')[0].firstChild.nodeValue,false,true)
      				document.getElementById('groupement2').options[i]=myOption;
      					}
      				}
    				}
     
    				// Ici on va voir comment faire du post
    				xhr.open("POST","cmbgroupement22.jsp",true);
    				// ne pas oublier ça pour le post
    				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    				// ne pas oublier de poster les arguments
    				// ici, l'id de l'auteur
     
    				sel2 = document.getElementById('projet');
    				idprojet = sel2.options[sel2.selectedIndex].value;
     
    				sel = document.getElementById('tranche2');
    				idtranche = sel.options[sel.selectedIndex].value;
     
    				xhr.send("idProjet="+idprojet+ "&idTranche="+idtranche);		
    			}
    		</script>
     
    <body onload='change()'>
    <form  method="POST" action="NouveauBien">
    			&nbsp;<fieldset style="padding: 2">
    			<legend>Information sur le Bien</legend>
    			<b>Identificateur : <input type="text" name="id_bien" size="20"></b><p>
    			<b>GH :&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    			<input type="text" name="gh" size="20"></b></p>
     
    			</fieldset><p>&nbsp;</p>
    			<fieldset style="width: 500px">
    				<legend>Information sur Projet</legend>
     
     
    				<label>Projet</label>
     
    				<select name="projet" id='projet' onchange='change()'>
     
    <%
                Projet prj = (Projet) application.getAttribute("prj");
                Collection prjs = ProjetDAO.getProjetId();
                if (prjs != null)
                {
                    if (prjs.size() > 0)
                    {
                        for (Iterator iterator = prjs.iterator(); iterator.hasNext(); )
                        {
                            Projet prjts = (Projet) iterator.next ();
     
    %>
     
    <OPTION value ="<%=prjts.getCode_projet()%>">
    <%out.print(prjts.getLibelle());%>
     
    </OPTION> 
    <%
                        }
                    }
                  }            
    %>
    </select>
     
     
    <label>Tranche</label>
    				<div id='tranche' style='display:inline'>
    				<select name='tranche' id='tranche2' onchange='change2()'>
     
                      <option value='-1'>Choisir un projet</option>
     
     
    				</select>
    				</div>
     
    <label>Groupement</label>
    				<div id='groupement' style='display:inline'>
    				<select name='groupement' id='groupement2'>
     
                      <option value='-1'>Choisir un projet ou tranche</option>
     
     
    				</select>
    				</div>
     
    			</fieldset>
     
    <p><b>Superficie : </b>&nbsp;&nbsp;&nbsp;&nbsp;
    			<input type="text" name="superficie" size="20"></p>
    			<p>&nbsp;</p>
    			<p><input type="submit" value="Enregistrer" name="B1"></p>
    			<p>&nbsp;</p>
    			<p>&nbsp;</p>
    		</form>
     
    </body>
    </html>

  13. #33
    Membre Expert
    Avatar de emmanuel.remy
    Inscrit en
    Novembre 2005
    Messages
    2 855
    Détails du profil
    Informations personnelles :
    Âge : 57

    Informations forums :
    Inscription : Novembre 2005
    Messages : 2 855
    Par défaut
    Salut,

    Pour la Nième fois, tu NE DOIS PAS avoir les mêmes name et id portés par deux balises différentes:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <div id='tranche' style='display:inline'>
    	<select name='tranche' id='tranche2' onchange='change2()'>
    ERE

  14. #34
    Membre averti
    Inscrit en
    Juillet 2005
    Messages
    22
    Détails du profil
    Informations forums :
    Inscription : Juillet 2005
    Messages : 22
    Par défaut
    Ok ok, voici la troisième mise à jour de mon code en prenant en compte se qu'a dit emmanuel, les combos réagissent mais elles sont vides

    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
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
     
     
    <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
        pageEncoding="ISO-8859-1"%>
    <%@ page import="java.util.Vector,java.util.Enumeration,GC.bean.Bien,
    GC.bean.Projet,GC.bean.Tranche,GC.bean.Groupement,GC.dao.GroupementDAO,
    GC.dao.ProjetDAO,java.util.*" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Insert title here</title>
    </head>
     
    <script type='text/javascript'>
    			function getXhr(){
                                    var xhr = null; 
    				if(window.XMLHttpRequest) // Firefox et autres
    				   xhr = new XMLHttpRequest(); 
    				else if(window.ActiveXObject){ // Internet Explorer 
    				   try {
    			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
    			            } catch (e) {
    			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
    			            }
    				}
    				else { // XMLHttpRequest non supporté par le navigateur 
    				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
    				   xhr = false; 
    				} 
                                    return xhr;
    			}
     
    			/**
    			* Méthode qui sera appelée sur le click du bouton
    			*/
     
    			function change()
    			{	
    			  //Si c'est AUCUN qui est sélectionné, il faut réinitialiser 
            //les 2 autres combos et quitter
    				var sel = document.getElementById('projet');
    				if (sel.options[sel.selectedIndex].value == -1) {
      					document.getElementById('tranche2').options.length=0;
      					document.getElementById('groupement2').options.length=0;
      					return;
            }
     
    				var xhr = getXhr();
    				// On défini ce qu'on va faire quand on aura la réponse
    				xhr.onreadystatechange = function()
    				{
    					//attendons dque le requete soit finie...
              if(xhr.readyState == 4 && xhr.status == 200){
                  //alert(xhr.responseText);
                var rst = xhr.responseXML;
      					var items=rst.getElementsByTagName('element');
      					document.getElementById('tranche2').options.length=0;
      					//penser à réinitialiser aussi id_ref
                document.getElementById('groupement2').options.length=0;
      					for(var i=0;i<items.length;i++)
      					{
      						var myOption = new Option(items[i].getElementsByTagName('option')[0].firstChild.nodeValue,items[i].getElementsByTagName('valeur')[0].firstChild.nodeValue,false,true)
      						document.getElementById('tranche2').options[i]=myOption;
      					}
     
      					//mise à jour de id_ref pour le 1er prenom affiché (sinon incohérence
                //au niveau de l'affichage)
      					change2();
      				}
    				}
     
    				// Ici on va voir comment faire du post
    				xhr.open("POST","cmbtranche22.jsp",true);
    				// ne pas oublier ça pour le post
    				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    				// ne pas oublier de poster les arguments
    				// ici, l'id de l'auteur
    				sel = document.getElementById('projet');
    				idprojet = sel.options[sel.selectedIndex].value;
    				xhr.send("idProjet="+idprojet);			
    			}
     
    			function change2()
    			{	
    				//si un seul prenom...	
    				if (document.getElementById('tranche2').options.length==1) 
    				{
    					//on vide la derniere combo
    					document.getElementById('groupement2').options.length=0; 
    					//on quitte
    					return;
    				}
     
    				var xhr = getXhr();
    				// On défini ce qu'on va faire quand on aura la réponse
    				xhr.onreadystatechange = function()
    				{
    				  if(xhr.readyState == 4 && xhr.status == 200){
    					 // alert(xhr.responseText);
    					  var rst = xhr.responseXML;
      					var items=rst.getElementsByTagName('element');
      					document.getElementById('groupement2').options.length=0;
      					for(var i=0;i<items.length;i++)
      					{
                 var myOption = new Option(items[i].getElementsByTagName('option')[0].firstChild.nodeValue,items[i].getElementsByTagName('valeur')[0].firstChild.nodeValue,false,true)
      				document.getElementById('groupement2').options[i]=myOption;
      					}
      				}
    				}
     
    				// Ici on va voir comment faire du post
    				xhr.open("POST","cmbgroupement22.jsp",true);
    				// ne pas oublier ça pour le post
    				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    				// ne pas oublier de poster les arguments
    				// ici, l'id de l'auteur
     
    				sel2 = document.getElementById('projet');
    				idprojet = sel2.options[sel2.selectedIndex].value;
     
    				sel = document.getElementById('tranche2');
    				idtranche = sel.options[sel.selectedIndex].value;
     
    				xhr.send("idProjet="+idprojet+ "&idTranche="+idtranche);		
    			}
    		</script>
     
    <body onload='change()'>
    <form  method="POST" action="NouveauBien">
    			&nbsp;<fieldset style="padding: 2">
    			<legend>Information sur le Bien</legend>
    			<b>Identificateur : <input type="text" name="id_bien" size="20"></b><p>
    			<b>GH :&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    			<input type="text" name="gh" size="20"></b></p>
     
    			</fieldset><p>&nbsp;</p>
    			<fieldset style="width: 500px">
    				<legend>Information sur Projet</legend>
     
     
    				<label>Projet</label>
     
    				<select name="projet" id='projet' onchange='change()'>
     
    <%
                Projet prj = (Projet) application.getAttribute("prj");
                Collection prjs = ProjetDAO.getProjetId();
                if (prjs != null)
                {
                    if (prjs.size() > 0)
                    {
                        for (Iterator iterator = prjs.iterator(); iterator.hasNext(); )
                        {
                            Projet prjts = (Projet) iterator.next ();
     
    %>
     
    <OPTION value ="<%=prjts.getCode_projet()%>">
    <%out.print(prjts.getLibelle());%>
     
    </OPTION> 
    <%
                        }
                    }
                  }            
    %>
    </select>
     
     
    <label>Tranche</label>
    				<div id='tranche' style='display:inline'>
    				<select name='tranche22' id='tranche2' onchange='change2()'>
     
                      <option value='-1'>Choisir un projet</option>
     
     
    				</select>
    				</div>
     
    <label>Groupement</label>
    				<div id='groupement' style='display:inline'>
    				<select name='groupement22' id='groupement2'>
     
                      <option value='-1'>Choisir un projet ou tranche</option>
     
     
    				</select>
    				</div>
     
    			</fieldset>
     
    <p><b>Superficie : </b>&nbsp;&nbsp;&nbsp;&nbsp;
    			<input type="text" name="superficie" size="20"></p>
    			<p>&nbsp;</p>
    			<p><input type="submit" value="Enregistrer" name="B1"></p>
    			<p>&nbsp;</p>
    			<p>&nbsp;</p>
    		</form>
     
    </body>
    </html>

  15. #35
    Membre averti
    Inscrit en
    Juillet 2005
    Messages
    22
    Détails du profil
    Informations forums :
    Inscription : Juillet 2005
    Messages : 22
    Par défaut
    est ce que le code ci-dessous est correcte ???

    j'attend vos feed-back

  16. #36
    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 RachidEL Voir le message
    est ce que le code ci-dessous est correcte ???

    j'attend vos feed-back
    Nous attendons le code "ci-dessous"

    A+

  17. #37
    Membre averti
    Inscrit en
    Juillet 2005
    Messages
    22
    Détails du profil
    Informations forums :
    Inscription : Juillet 2005
    Messages : 22
    Par défaut


    je veux dire ci-dessus ...

  18. #38
    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
    OK.

    Ça "semble" mieux ...

    Par contre, il serait plus réaliste de faire d'abord fonctionner ta 1° liste (qui alimente la 2°), puis une fois que ça marchera, se pencher sur l'alimentation de la 3° à partir de la 2°.
    Bref, procéder par étape, quoi ....

    Parce qu'en essayant de tout faire fonctionner d'un coup ... difficile de cerner le(s) problème(s)

    A+

  19. #39
    Membre averti
    Inscrit en
    Juillet 2005
    Messages
    22
    Détails du profil
    Informations forums :
    Inscription : Juillet 2005
    Messages : 22
    Par défaut
    voilà, j'ai suivi ton conseil, j'ai supprimé l'appel à la fonction change2() à partir de la fonction change(), ceci devrait normalement charger seulement la deuxième combo...

    mais malgré ça, cela ne donne rien, voici le nouveau code:

    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
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
     
     
    <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
        pageEncoding="ISO-8859-1"%>
    <%@ page import="java.util.Vector,java.util.Enumeration,GC.bean.Bien,
    GC.bean.Projet,GC.bean.Tranche,GC.bean.Groupement,GC.dao.GroupementDAO,
    GC.dao.ProjetDAO,java.util.*" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Insert title here</title>
    </head>
     
    <script type='text/javascript'>
    			function getXhr(){
                                    var xhr = null; 
    				if(window.XMLHttpRequest) // Firefox et autres
    				   xhr = new XMLHttpRequest(); 
    				else if(window.ActiveXObject){ // Internet Explorer 
    				   try {
    			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
    			            } catch (e) {
    			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
    			            }
    				}
    				else { // XMLHttpRequest non supporté par le navigateur 
    				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
    				   xhr = false; 
    				} 
                                    return xhr;
    			}
     
    			/**
    			* Méthode qui sera appelée sur le click du bouton
    			*/
     
    			function change()
    			{	
    			  //Si c'est AUCUN qui est sélectionné, il faut réinitialiser 
            //les 2 autres combos et quitter
    				var sel = document.getElementById('projet');
    				if (sel.options[sel.selectedIndex].value == -1) {
      					document.getElementById('tranche2').options.length=0;
      					document.getElementById('groupement2').options.length=0;
      					return;
            }
     
    				var xhr = getXhr();
    				// On défini ce qu'on va faire quand on aura la réponse
    				xhr.onreadystatechange = function()
    				{
    					//attendons dque le requete soit finie...
              if(xhr.readyState == 4 && xhr.status == 200){
                  //alert(xhr.responseText);
                var rst = xhr.responseXML;
      					var items=rst.getElementsByTagName('element');
      					document.getElementById('tranche2').options.length=0;
      					//penser à réinitialiser aussi id_ref
                document.getElementById('groupement2').options.length=0;
      					for(var i=0;i<items.length;i++)
      					{
      						var myOption = new Option(items[i].getElementsByTagName('option')[0].firstChild.nodeValue,items[i].getElementsByTagName('valeur')[0].firstChild.nodeValue,false,true)
      						document.getElementById('tranche2').options[i]=myOption;
      					}
     
      					//mise à jour de id_ref pour le 1er prenom affiché (sinon incohérence
                //au niveau de l'affichage)
     
      				}
    				}
     
    				// Ici on va voir comment faire du post
    				xhr.open("POST","cmbtranche22.jsp",true);
    				// ne pas oublier ça pour le post
    				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    				// ne pas oublier de poster les arguments
    				// ici, l'id de l'auteur
    				sel = document.getElementById('projet');
    				idprojet = sel.options[sel.selectedIndex].value;
    				xhr.send("idProjet="+idprojet);			
    			}
     
     
     
    			function change2()
    			{	
    				//si un seul prenom...	
    				if (document.getElementById('tranche2').options.length==1) 
    				{
    					//on vide la derniere combo
    					document.getElementById('groupement2').options.length=0; 
    					//on quitte
    					return;
    				}
     
    				var xhr = getXhr();
    				// On défini ce qu'on va faire quand on aura la réponse
    				xhr.onreadystatechange = function()
    				{
    				  if(xhr.readyState == 4 && xhr.status == 200){
    					 // alert(xhr.responseText);
    					  var rst = xhr.responseXML;
      					var items=rst.getElementsByTagName('element');
      					document.getElementById('groupement2').options.length=0;
      					for(var i=0;i<items.length;i++)
      					{
                 var myOption = new Option(items[i].getElementsByTagName('option')[0].firstChild.nodeValue,items[i].getElementsByTagName('valeur')[0].firstChild.nodeValue,false,true)
      				document.getElementById('groupement2').options[i]=myOption;
      					}
      				}
    				}
     
    				// Ici on va voir comment faire du post
    				xhr.open("POST","cmbgroupement22.jsp",true);
    				// ne pas oublier ça pour le post
    				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    				// ne pas oublier de poster les arguments
    				// ici, l'id de l'auteur
     
    				sel2 = document.getElementById('projet');
    				idprojet = sel2.options[sel2.selectedIndex].value;
     
    				sel = document.getElementById('tranche2');
    				idtranche = sel.options[sel.selectedIndex].value;
     
    				xhr.send("idProjet="+idprojet+ "&idTranche="+idtranche);		
    			}
    		</script>
     
    <body onload='change()'>
    <form  method="POST" action="NouveauBien">
    			&nbsp;<fieldset style="padding: 2">
    			<legend>Information sur le Bien</legend>
    			<b>Identificateur : <input type="text" name="id_bien" size="20"></b><p>
    			<b>GH :&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    			<input type="text" name="gh" size="20"></b></p>
     
    			</fieldset><p>&nbsp;</p>
    			<fieldset style="width: 500px">
    				<legend>Information sur Projet</legend>
     
     
    				<label>Projet</label>
     
    				<select name="projet" id='projet' onchange='change()'>
     
    <%
                Projet prj = (Projet) application.getAttribute("prj");
                Collection prjs = ProjetDAO.getProjetId();
                if (prjs != null)
                {
                    if (prjs.size() > 0)
                    {
                        for (Iterator iterator = prjs.iterator(); iterator.hasNext(); )
                        {
                            Projet prjts = (Projet) iterator.next ();
     
    %>
     
    <OPTION value ="<%=prjts.getCode_projet()%>">
    <%out.print(prjts.getLibelle());%>
     
    </OPTION> 
    <%
                        }
                    }
                  }            
    %>
    </select>
     
     
    <label>Tranche</label>
    				<div id='tranche' style='display:inline'>
    				<select name='tranche22' id='tranche2' onchange='change2()'>
     
                      <option value='-1'>Choisir un projet</option>
     
     
    				</select>
    				</div>
     
    <label>Groupement</label>
    				<div id='groupement' style='display:inline'>
    				<select name='groupement22' id='groupement2'>
     
                      <option value='-1'>Choisir un projet ou tranche</option>
     
     
    				</select>
    				</div>
     
    			</fieldset>
     
    <p><b>Superficie : </b>&nbsp;&nbsp;&nbsp;&nbsp;
    			<input type="text" name="superficie" size="20"></p>
    			<p>&nbsp;</p>
    			<p><input type="submit" value="Enregistrer" name="B1"></p>
    			<p>&nbsp;</p>
    			<p>&nbsp;</p>
    		</form>
     
    </body>
    </html>

  20. #40
    Membre averti
    Inscrit en
    Juillet 2005
    Messages
    22
    Détails du profil
    Informations forums :
    Inscription : Juillet 2005
    Messages : 22
    Par défaut
    a mon avis le problème devrait provenir de la variable myOption, qui est d'ailleurs soulignée en rouge par eclipse, elle sert à quoi en fait ??

Discussions similaires

  1. Listes liées dans une JSP - Java & Ajax
    Par Gwen_59 dans le forum Servlets/JSP
    Réponses: 2
    Dernier message: 24/04/2012, 14h34
  2. [AJAX] deux listes liées
    Par kawther dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 03/04/2007, 13h15
  3. [AJAX] Trois listes liées
    Par jason69 dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 30/03/2007, 20h23
  4. [AJAX] plusieurs listes liées
    Par highman dans le forum Général JavaScript
    Réponses: 7
    Dernier message: 02/03/2007, 10h31

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