[AJAX] Chargement select liés avec ajax sous IE

Version imprimable

05/08/2010, 12h19
alex4488

[AJAX] Chargement select liés avec ajax sous IE

Bonjour,

Voilà, j'ai deux listes liés dynamiquement, la deuxième liste déroulante se remplit en fonction du choix de la première en ajax.

Le script marche très bien sous Firefox mais pas sous IE.

Est-ce que quelqu'un aurait déjà rencontré ce problème ? Et y aurait-il une solution à adapter pour que çà fonctionne sous IE.

Merci.
05/08/2010, 13h04
llaffont

Lorsque tu opères dans ton SELECT, as tu un flag jaune en bas à gauche de ta fenêtre IE ?

Si Oui c'est que tu as une erreur Script ou pagination que FF corrige mais pas IE.
05/08/2010, 14h13
Bovino

Citation:

Envoyé par alex4488

Le script marche très bien sous Firefox mais pas sous IE.

Tu es aussi explicite qu'un message d'erreur de IE :aie:

Mais à priori, il s'agit d'un sujet récurrent dont je m'étonne que tu ne l'ai pas trouvé avec une recherche :mrgreen:

IE accepte mal l'attribution dynamique du name, donc cela pose ensuite problème pour la transmission du formulaire en question.

Bonjour,

llaffont : Non je n'ai pas de flag jaune dans ma fenêtre IE.

Oui, je n'ai pas été très explicite.

J'ai cherché sur plusieurs forums une solution à ce problème mais n'a pas trouvé.

Voilà le code que j'utilise pour aider à comprendre.

Le fichier php qui est affiché avant la requête Ajax (gestion_savoir_faire.php) :

Code:

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
<?
if(isset($_POST['hi_action_savoir_faire']))
if($_POST['hi_action_savoir_faire'] <> "")
{
gerer_savoir_faire();
}
?>
 
<form enctype="multipart/form-data" name="fo_savoir_faire" id="fo_savoir_faire" method="post" style="margin-left:20px" action="">
<input type="hidden" name="hi_action_savoir_faire" id="hi_action_savoir_faire" value="" />
<input type="hidden" id="hi_id_savoir_faire" name="hi_id_savoir_faire" value="" />
 
 
////LISTE DES SAVOIR-FAIRES
 
<div id="liste_savoir_faire_metiers">
<?
// Ceci est un tableau réalisé avec une classe PHP, le clic sur une ligne de ce tableau va déclencher la requête Ajax (envoyer_texte()
 
$dg->printTable();
 
?>
</div>
 
<div id="choix_savoir_faire">
 
<?
//// SELECTION DU SAVOIR-FAIRE ////
?>
 
<input type="text" id="te_nouveau_nom_savoir_faire" name="te_nouveau_nom_savoir_faire" disabled="disabled" size="40" />
 
<?
//// MODIFIER SAVOIR-FAIRE ////
?>
 
<input type="button" value="" id="bt_modifier" name="bt_modifier" onclick="javascript:envoyer('Modifier')" disabled="disabled" />
 
<?
//// SUPPRIMER SAVOIR-FAIRE ////
?>
 
<input type="button" value="" id="bt_supprimer" name="bt_supprimer" onclick="javascript:envoyer('Supprimer')" disabled="disabled" />
 
</div>
 
</form>

Les fonctions javascript (celle qui utilise Ajax et la fonction qui submit le formulaire) (gestion_savoir_faire.php) :

Code:

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
function envoyer_texte(id_savoir_faire)
{
var xhr = getXhr();
xhr.onreadystatechange = function(){
 
if(xhr.readyState == 4 && xhr.status == 200){
leselect = xhr.responseText;
document.getElementById('choix_savoir_faire').innerHTML = leselect;
}
}
 
xhr.open("POST","selectionner_savoir_faire.php",true);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send("id_savoir_faire="+id_savoir_faire);
 
document.getElementById('hi_id_savoir_faire').value = id_savoir_faire;
}
 
 
function envoyer(parametre)
{
document.getElementById('hi_action_savoir_faire').value = parametre;
document.fo_savoir_faire.action = "admin.php?partie=gestion_savoir_faire";
document.fo_savoir_faire.submit();
}

Et voilà mon fichier qui est appelé par l'Ajax (selectionner_savoir_faire.php)

Code:

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
<?
session_start();
 
include ("fonctions.php");
 
$verif = "SELECT count(*) AS nb FROM savoir_faire WHERE id_savoir_faire = '".$_POST['id_savoir_faire']."' AND id_langue = '".$_SESSION['id_langue']."' AND etat = 0";
 
$exec_verif = mysql_query($verif) or die(mysql_error());
 
$resultat = mysql_fetch_array($exec_verif);
 
if($resultat['nb'] == 1)
{
$select_savoir_faire = "SELECT libelle FROM savoir_faire WHERE id_savoir_faire = '".$_POST['id_savoir_faire']."' AND id_langue = '".$_SESSION['id_langue']."' AND etat = 0";
}
else
{
$select_savoir_faire = "SELECT libelle FROM savoir_faire WHERE id_savoir_faire = '".$_POST['id_savoir_faire']."' AND id_langue = '".$_SESSION['id_langue_defaut']."' AND etat = 0";
}
 
$exec_select_savoir_faire = mysql_query($select_savoir_faire) or die(mysql_error());
 
$savoir_faire = mysql_fetch_array($exec_select_savoir_faire);
 
?>
 
<?
//// SELECTION DU SAVOIR-FAIRE ////
?>
 
 
<input type="text" id="te_nouveau_nom_savoir_faire" name="te_nouveau_nom_savoir_faire" value="<? echo $savoir_faire['libelle'] ?>" size="40" />
<?
//// MODIFIER SAVOIR-FAIRE ////
?>
<input type="button" value="" id="bt_modifier" name="bt_modifier" onclick="javascript:envoyer('Modifier')" />
<?
//// SUPPRIMER SAVOIR-FAIRE ////
?>
<input type="button" value="" id="bt_supprimer" name="bt_supprimer" onclick="javascript:envoyer('Supprimer')" />

Et voici en plus une partie de mon fichier qui contient la fonction traitant le formulaire (fonction_gestion_savoir_faire.php) :

Code:

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
<?php
 
function gerer_savoir_faire() {
 
$action = $_POST['hi_action_savoir_faire'];
 
switch($action)
{
 
case 'Modifier' :
///traitement des variables du tableau, vzrification validitz
 
//Cette variable est bien récupéré car l'élément hi_id_savoir_faire n'a pas été remplacé par l'Ajax
$id_savoir_faire = $_POST['hi_id_savoir_faire'];
 
//C'est à partir de là que la fonction plante, le POST n'arrive pas à être récupérer sous IE
$nom_savoir_faire_modifie = $_POST['te_nouveau_nom_savoir_faire'];
 
return true;
 
break;
 
case 'Supprimer' :
 
....
 
Ce cas fonctionne bien.
 
....
 
return true;
 
break; 
 
}
 
}

Voilà, si cela peut aider quelqu'un à trouver la solution de ce problème,
cela m'aiderait beaucoup. Merci

J'ai remarqué un détail qui pourrait aider à trouver la solution.

C'est au niveau du innerHTML dans le Javascript.
Code:

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 function envoyer_texte(id_savoir_faire, id_savoir_faire) { var xhr = getXhr(); xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ // affiche le résultat de la requête Ajax alert(xhr.responseText); leselect = xhr.responseText; document.getElementById('choix_savoir_faire').innerHTML = leselect; // affiche le contenu de la div actualisé avec Ajax alert(document.getElementById('choix_savoir_faire').innerHTML); } } // Ici on va voir comment faire du post xhr.open("POST","selectionner_savoir_faire.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 xhr.send("id_savoir_faire="+id_savoir_faire); document.getElementById('hi_id_savoir_faire').value = id_savoir_faire; }
Il y a des différences entre les deux alerts.

Dans le deuxième alert, les id et name des éléments comme un input text ne sont pas mis entre guillemets ainsi que la value qui n'est pas renseigné.
Donc, après ma requête, je récupère des éléments formulaires dont l'id et le name sont mal écrits.

Si quelqu'un sait comment faire pour que ce innerHTML fonctionne correctement, ce serait sympa.

Merci.

07/08/2010, 22h58
alex4488

C'est bon j'ai trouvé mon problème,

C'était la ligne :

$dg->printtable();

qui générait un tableau contenant un formulaire

Il y avait donc un formulaire imbriqué dans le formulaire destiné à être traité, ce qu'Internet Explorer ne pouvait pas gérer.