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] Select lié [IE : NON / FF : OK]


Sujet :

AJAX

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé
    Inscrit en
    Février 2007
    Messages
    271
    Détails du profil
    Informations forums :
    Inscription : Février 2007
    Messages : 271
    Par défaut [AJAX] Select lié [IE : NON / FF : OK]
    Bonjour,

    Je me suis inspiré de ce sujet :
    http://www.developpez.net/forums/d80...nds-ne-marche/

    Citation Envoyé par Jeol2007 Voir le message
    Bien, Bien Bien

    Ca marche tres bien.

    Mais il y a une chose:

    - Il y a un bug avec internet explorer, quand je choisi un livre, le prix ne change pas tandis que ca fonctionne sur firefox.

    Merci a toi bovino!

    Edit:Il n'y a qu'un seul probleme et ce n'est qu'avec internet explore
    J'ai exactement le même problème.

    Je n'arrive pas à afficher ma dernière liste "dynamiquement".

    A Noter que cela fonctionne correctement avec Firefox... Ça doit être une petite instruction à rajouter pour IE

    Voici mon code AJAX :
    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
    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 go()
    { 
    	var xhr = getXhr(); 
    	// On défini ce qu'on va faire quand on aura la réponse 
    	xhr.onreadystatechange = function()
    	{ 
    		// On ne fait quelque chose que si on a tout reçu et que le serveur est ok 
    		if(xhr.readyState == 4 && xhr.status == 200)
    		{ 
    			leselect = xhr.responseText; 
    			// On se sert de innerHTML pour rajouter les options a la liste 
    			document.getElementById('lebatiment').innerHTML = leselect; 
    			document.getElementById('lebatiment').onchange = gobatiment;
    			gobatiment();
    		} 
    	} 
    	// Ici on va voir comment faire du post 
    	xhr.open("POST","ajaxBatiment.php",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('corps_de_metier'); 
    	idcorpsdemetier = sel.options[sel.selectedIndex].value; 
    	xhr.send("id_corpsdemetier="+idcorpsdemetier); 
    } 
     
    function gobatiment()
    { 
    	var xhr = getXhr(); 
    	// On défini ce qu'on va faire quand on aura la réponse 
    	xhr.onreadystatechange = function()
    	{ 
    		// On ne fait quelque chose que si on a tout reçu et que le serveur est ok 
    		if(xhr.readyState == 4 && xhr.status == 200)
    		{ 
    			leselect = xhr.responseText; 
    			// On se sert de innerHTML pour rajouter les options a la liste 
    			document.getElementById('lenumeroetage').innerHTML = leselect; 
    			document.getElementById('lenumeroetage').onchange = gonumeroetage;
    			gonumeroetage();
     
    		} 
    	} 
    	// Ici on va voir comment faire du post 
    	xhr.open("POST","ajaxNumetage.php",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('batiment'); 
    	idbatiment = sel.options[sel.selectedIndex].value; 
    	xhr.send("id_batiment="+idbatiment); 
    } 
     
    function gonumeroetage()
    { 
    	var xhr = getXhr(); 
    	// On défini ce qu'on va faire quand on aura la réponse 
    	xhr.onreadystatechange = function()
    	{ 
    		// On ne fait quelque chose que si on a tout reçu et que le serveur est ok 
    		if(xhr.readyState == 4 && xhr.status == 200)
    		{ 
    			leselect = xhr.responseText; 
    			// On se sert de innerHTML pour rajouter les options a la liste 
    			document.getElementById('lebureau').innerHTML = leselect;		
    		} 
    	} 
    	// Ici on va voir comment faire du post 
    	xhr.open("POST","ajaxBureau.php",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('numero_etage'); 
    	sel1 = document.getElementById('batiment'); 
    	idnumeroetage = sel.options[sel.selectedIndex].value;
    	idbatiment = sel1.options[sel1.selectedIndex].value;
    	xhr.send("id_numeroetage="+idnumeroetage+"&id_batiment="+idbatiment); 
    }

  2. #2
    Membre chevronné
    Avatar de hornetbzz
    Homme Profil pro
    Directeur commercial
    Inscrit en
    Octobre 2009
    Messages
    482
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 57
    Localisation : France

    Informations professionnelles :
    Activité : Directeur commercial

    Informations forums :
    Inscription : Octobre 2009
    Messages : 482
    Par défaut
    Salut,

    Pas certain que cela soit la cause mais IE et FF ne gèrent pas les évènements de la même façon, or tu utilises une syntaxe unique :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    document.getElementById('lebatiment').onchange = gobatiment;
    Tu peux peut-être essayer comme ça pour affecter tes évenements:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    var mon_id= document.getElementById('lebatiment');
    if(document.all) mon_id.attachEvent("onchange",  gobatiment);
    else mon_id.addEventListener("change",  gobatiment, true);
    en reproduisant le même principe pour les autres évènements.

  3. #3
    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
    Bonjour,
    @hornett > la 1° version ne devrait pas poser de problème.

    @Kenshin86 > Vérifie que tu n'as un name d'un élément qui correspond à l'id d'un autre élément.
    Ce genre de chose chagrine IE (mais pas FF)

    EDIT : sinon, si on pouvait voir la partie HTML correspondante (le HTML généré, pas de PHP), ça aiderait

    A+

  4. #4
    Membre éclairé
    Inscrit en
    Février 2007
    Messages
    271
    Détails du profil
    Informations forums :
    Inscription : Février 2007
    Messages : 271
    Par défaut
    Le code HTML est le suivant :

    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
    <form method="post" action="index.php?page=saisie_intervention_2"> 
    	<fieldset> 
    		<legend>&nbsp Saisie intervention &nbsp </legend> 
    		<table class="center_bloc">
    			<tr>
    				<td>Corps de Metier</td>
    				<td>
    					<?php 
                                            $sql="SELECT id_cdm,designation_cdm FROM corps_de_metier";
                                            $req= mysql_query($sql) or die('Erreur SQL !'.$sql.'<br>'.mysql_error());
                                            ?>
    					<select name='corps_de_metier' id='corps_de_metier' onchange='go()'> 
    						<option value='-1'>Choisir un corps de métier</option> 
    						<?php 
                                                    $res = mysql_query("SELECT id_cdm,designation_cdm FROM corps_de_metier"); 
                                                    while($row = mysql_fetch_assoc($res))
                                                    { 
                                                            echo "<option value='".$row["id_cdm"]."'>".$row["designation_cdm"]."</option>"; 
                                                    } 
                                                    ?> 
    					</select>	
    				</td>
     
    			</tr>
    			<tr>
    				<td>Batiment</td>
    				<td>
    					<div id='lebatiment' style='display:inline'> 
    					<select name='batiment' id='batiment'> 
    						<option value='-1'>Choisir un batiment</option> 
    					</select> 
    					</div> 
    				</td>
    			</tr>
    			<tr>
    				<td>Numéro Etage</td>
    				<td>
    					<div id='lenumeroetage' style='display:inline'> 
    					<select name='numero_etage' id='numero_etage'> 
    						<option value='-1'>Choisir un n° d'étage</option> 
    					</select> 
    					</div>
    				</td>
    			</tr>
    			<tr>
    				<td>Bureau</td>
    				<td>
    					<div id='lebureau' style='display:inline'> 
    					<select name='bureau' id='bureau'> 
    						<option value='-1'>Choisir un bureau</option> 
    					</select> 
    				</td>
    			</tr>
    		</table>
    		<br />
    		<td><input type="submit" value="Envoyez"></td>
    	</fieldset> 
    </form>

  5. #5
    Membre éclairé
    Inscrit en
    Février 2007
    Messages
    271
    Détails du profil
    Informations forums :
    Inscription : Février 2007
    Messages : 271
    Par défaut
    Citation Envoyé par hornetbzz Voir le message
    Salut,

    Pas certain que cela soit la cause mais IE et FF ne gèrent pas les évènements de la même façon, or tu utilises une syntaxe unique :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    document.getElementById('lebatiment').onchange = gobatiment;
    Tu peux peut-être essayer comme ça pour affecter tes évenements:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    var mon_id= document.getElementById('lebatiment');
    if(document.all) mon_id.attachEvent("onchange",  gobatiment);
    else mon_id.addEventListener("change",  gobatiment, true);
    en reproduisant le même principe pour les autres évènements.

    J'ai essayé le code ci-dessous en suivant tes conseils, le même problème se produit :

    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
    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 go()
    { 
    	var xhr = getXhr(); 
    	// On défini ce qu'on va faire quand on aura la réponse 
    	xhr.onreadystatechange = function()
    	{ 
    		// On ne fait quelque chose que si on a tout reçu et que le serveur est ok 
    		if(xhr.readyState == 4 && xhr.status == 200)
    		{ 
    			leselect = xhr.responseText; 
    			// On se sert de innerHTML pour rajouter les options a la liste 
    			document.getElementById('lebatiment').innerHTML = leselect; 
    			var mon_id= document.getElementById('lebatiment');
    			if(document.all) mon_id.attachEvent("onchange",  gobatiment);
    			else mon_id.addEventListener("change",  gobatiment, true);		
     
     
     
    		} 
    	} 
    	// Ici on va voir comment faire du post 
    	xhr.open("POST","ajaxBatiment.php",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('corps_de_metier'); 
    	idcorpsdemetier = sel.options[sel.selectedIndex].value; 
    	xhr.send("id_corpsdemetier="+idcorpsdemetier); 
    } 
     
    function gobatiment()
    { 
    	var xhr = getXhr(); 
    	// On défini ce qu'on va faire quand on aura la réponse 
    	xhr.onreadystatechange = function()
    	{ 
    		// On ne fait quelque chose que si on a tout reçu et que le serveur est ok 
    		if(xhr.readyState == 4 && xhr.status == 200)
    		{ 
    			leselect = xhr.responseText; 
    			// On se sert de innerHTML pour rajouter les options a la liste 
    			document.getElementById('lenumeroetage').innerHTML = leselect; 
    			var mon_id1= document.getElementById('lenumeroetage');
    			if(document.all) mon_id1.attachEvent("onchange",  gonumeroetage);
    			else mon_id1.addEventListener("change",  gonumeroetage, true);	
     
     
    		} 
    	} 
    	// Ici on va voir comment faire du post 
    	xhr.open("POST","ajaxNumetage.php",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('batiment'); 
    	idbatiment = sel.options[sel.selectedIndex].value; 
    	xhr.send("id_batiment="+idbatiment); 
    } 
     
    function gonumeroetage()
    { 
    	var xhr = getXhr(); 
    	// On défini ce qu'on va faire quand on aura la réponse 
    	xhr.onreadystatechange = function()
    	{ 
    		// On ne fait quelque chose que si on a tout reçu et que le serveur est ok 
    		if(xhr.readyState == 4 && xhr.status == 200)
    		{ 
    			leselect = xhr.responseText; 
    			// On se sert de innerHTML pour rajouter les options a la liste 
    			document.getElementById('lebureau').innerHTML = leselect;
    		} 
    	} 
    	// Ici on va voir comment faire du post 
    	xhr.open("POST","ajaxBureau.php",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('numero_etage'); 
    	sel1 = document.getElementById('batiment'); 
    	sel2 = document.getElementById('bureau'); 
    	idnumeroetage = sel.options[sel.selectedIndex].value;
    	idbatiment = sel1.options[sel1.selectedIndex].value;
    	idbureau = sel2.options[sel2.selectedIndex].value;
    	//xhr.send("id_numeroetage="+idnumeroetage); 
    	xhr.send("id_numeroetage="+idnumeroetage+"&id_batiment="+idbatiment+"&id_bureau="+idbureau); 
     
    }

  6. #6
    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
    Arf !

    Il manque le </div> de "le_bureau"

    A+

  7. #7
    Membre éclairé
    Inscrit en
    Février 2007
    Messages
    271
    Détails du profil
    Informations forums :
    Inscription : Février 2007
    Messages : 271
    Par défaut
    Donc alors, j'ai réessayé en rajoutant le </div> que j'avais oublié et j'ai toujours le même problème

    A la sélection du numéro de l'étage, j'ai pas l'affichage du bureau dans la liste.

    Cela fonctionne qu'avec Firefox !

    J'ai le problème avec IE,Opéra et même Chrome

  8. #8
    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 Kenshin86 Voir le message
    Cela fonctionne qu'avec Firefox !

    J'ai le problème avec IE,Opéra et même Chrome

    Pour cette liste, que te renvoie Ajax ?
    (il suffit de saisir dans la barre d'adresse du nav l'url appelée par Ajax, avec ses paramètres, puis de récupérer le code source de la page)

    Sinon, pas d'erreur Javascript ?

    A+

  9. #9
    Membre chevronné
    Avatar de hornetbzz
    Homme Profil pro
    Directeur commercial
    Inscrit en
    Octobre 2009
    Messages
    482
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 57
    Localisation : France

    Informations professionnelles :
    Activité : Directeur commercial

    Informations forums :
    Inscription : Octobre 2009
    Messages : 482
    Par défaut
    Euh je rêve ou bien ne faudrait-il pas attacher un évènement également sur ta dernière liste "bureau" ... ?

Discussions similaires

  1. Réponses: 6
    Dernier message: 12/01/2008, 22h53
  2. [AJAX] header et page non appelée
    Par Tymk dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 26/05/2007, 15h42
  3. [AJAX] <select> Client et <select> Projets lié
    Par van___fanel dans le forum Général JavaScript
    Réponses: 15
    Dernier message: 14/04/2007, 18h25
  4. [AJAX] Création obj/form non accessibles
    Par speedev dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 04/07/2006, 11h27
  5. Select avec écriture non bloquante
    Par Invité dans le forum Réseau
    Réponses: 5
    Dernier message: 24/05/2006, 16h20

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