Discussion :

[Darkroro]

Bonjour...

Bon je viens poster ici parce que je tourne en rond depuis pas mal de temps et pas moyen de trouver la solution.

Mon problème est pas dur à expliquer. J'ai un tableau contenant des cellules, 1 de ces cellules s'affichent dynamiquement. En gros j'ai deux cellules dans mon code et l'une ou l'autre s'affiche selon des paramètres.

Dans un premier temps je suis donc passé par un innerHTML appelé sur le parent de ma cellule pour y mettre le contenu 1 ou le contenu 2, ça passait bien sous FF mais pas sous IE qui me pond une erreur...

J'ai donc essayé la propriété display, je mets dans mon code 2 cellule et suivant les paramètre je change le display en table-cell ou en none... ici pareil, ok sous FF et ça chie une erreur sous IE...

Je vais essayer de vous résumer mon code car il est assez long (et qui plus est je ne peux pas le donner comme il est là )...

le code php qui génère mes cellules...

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
 
<?php
// ma cellule 1
$cell = "<td id=\"fields\" colspan=7>";
$cell .= "<table><tr>";
$cell .= "<td>";
$cell .= "<select name =\"select1\" id=\"select1\">";
$requete = "je recup les truc à mettre dans le select1 dans ma bdd";
while ($res=mysql_fetch_array($result)) {
    $cell .= "<option value=\"".trim($res["champ1"]."\" ".(trim($res["champ2"])==$test?"selected":"").">".trim($res["champ3"])/"</option>";
}
$cell .= "</select>";
$cell .= "</td>";
$cell .= "<td><input type=\"text\" name=\"text1\" id=\"text1\" Onfocus=\"document.getElementById(\'text1\').className=\'focus_text\';\" Onblur=\"document.getElementById(\'nom\').className=\'blur_text\';\"></td>";
$cell .= "</tr></table>";
$cell .= "</td>";
 
// ma cellule 2
$cellbis = "<td id=\"fieldsbis\" colspan=7>";
// pour le reste elle est construite comme la précédente sauf que y'a 2 select (select2 et select3) et 2 champs text (text2 et text3) dans le table de ma cellule
?>

le code HTML où je vais insérer l'une de mes cellules... (un simple table)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
...
<tr id="dynamic">
    <? if(test==1 || test==3) {
              echo $cell;
        } else {
              echo $cellbis;
        } ?>
</tr>
...

le code js pour insérer par innerHTML... ( fonction que j'appelle suite à un changement sur un autre select => onchange="check_cell(this.value);" )

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
function check_cell(test) {
     var cell = '<?=$cell?>';
     var cellbis = '<?=$cellbis?>';
     if(test==1 or test==3) {
           document.getElementById("dynamic").innerHTML = cell;
     } else {
           document.getElementById("dynamic").innerHTML = cellbis;
     }
}

Je crois n'avoir rien oublié pour la partie utilisant innerHTML...

Pour la partie display j'ai pas trop changé mon code, c'est juste que dans mon <tr> je mets mes deux cellules mais une en "display:none;", l'autre étant en "display:table-cell;" et ma fonction check_cell agit directement sur le style.display de mes cellules pour les mettre en none ou en table-cell...

Voilà... toute ces solutions fonctionnent sous FF mais pas sous IE qui pond une erreur sur soit le innerHTML soit le display... quelqu'un a une idée svp ?

EDIT: ah oui j'ai testé le appendChild aussi...

[Matthieu2000]

this.value

d'un select marche mal avec ie

[E.Bzz]

Bonjour,

d'un select marche mal avec ie

et sont de toutes façons de type caractère (comme tout .value)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if(test==1 or test==3)

A+

[Bovino]

Ensuite, ton code semble montrer quelques confusions entre JavaScript et PHP... ce serait possible d'avoir le code HTML généré ?

[Darkroro]

oui excusez moi... mes test sont bien sous la forme

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

test == '01' or test == '03'

ça passe très bien...

@Bovino : je comprends pas trop pourquoi tu me dis que je confonds JS et PHP ?
Et malheureusement non je peux pas vous filer le code générer à moins de le nettoyer mais ça va prendre du temps...

Si tu dis que je confonds JS et PHP à cause de ma fonction :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
<script type="text/javascript">
function check_cell(test) {
     var cell = '<?=$cell?>';
     var cellbis = '<?=$cellbis?>';
     if(test==1 or test==3) {
           document.getElementById("dynamic").innerHTML = cell;
     } else {
           document.getElementById("dynamic").innerHTML = cellbis;
     }
}
</script>

ça dans ma page ça génère :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
<script type="text/javascript">
function check_cell(test) {
     var cell = 'tout le contenu de la variable php $cell';
     var cellbis = 'tout le contenu de la variable php $cellbis';
     if(test==1 or test==3) {
           document.getElementById("dynamic").innerHTML = cell;
     } else {
           document.getElementById("dynamic").innerHTML = cellbis;
     }
}
</script>

Je transfère ma variable PHP dans mon code JS et ça passe la plupart du temps, faut juste faire attention aux " ' \" \'

[Bovino]

@Bovino : je comprends pas trop pourquoi tu me dis que je confonds JS et PHP ?

Je disais ça parce que les similitudes de nommage et le fait que cette erreur est assez fréquente m'y ont fait penser (d'où l'emploi de "semble montrer")

En revanche, j'avais pas fait gaffe à ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if(test==1 or test==3)

or n'existe pas en JavaScript, c'est plutôt :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if(test==1 || test==3)

[Darkroro]

oui en effet "or" n'existe pas en JS... mais ça change rien à mon problème en fait...

le soucis vient je pense de mes variables cell et cellbis qui ne contiennent pas ce qu'il faut sous IE... erreur d'interprétation sans doute... je vais tester ça sous Chrome et autre voir si ça vraiment d'IE...

[E.Bzz]

le soucis vient je pense de mes variables cell et cellbis qui ne contiennent pas ce qu'il faut sous IE...

Le contenu étant générer par PHP, IE récupère le même contenu que les autres nav

On pourrait avoir un exemple d'un de ces contenus, d'ailleurs ?

A+

[gwyohm]

Et les erreurs sous IE, ce sont lesquelles ?
Attention aussi, quand tu ouvres la fenêtre d'erreur sous IE, il te montre la dernière ; clique sur précédent jusqu'à arriver à la première...

[Darkroro]

Bon voilà le code HTML généré par l'affichage des mes variables cell et cellbis... (le premier td c'est ce qu'il y a dans cell et l'autre dans cellbis)

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
 
<td id="fields" style="display:table-cell;" colspan=7>
  <table>
    <tr>
      <td class="texte">champ1:</td><td>&nbsp;</td>
      <td><input type="text" value="" name="champ1" id="champ1" Onclick="document.getElementById(\'champ1\').className=\'class2\';" Onchange="document.getElementById(\'champ1\').className=\'class3\';" Onblur="document.getElementById(\'champ1\').className=\'class3\';" size=20 class="class3"></td>
      <td>&nbsp;&nbsp;</td>
      <td class="texte">champ2:</td>
      <td>&nbsp;</td>
      <td><input type="text" value="" name="champ2" id="champ2" Onclick="document.getElementById(\'champ2\').className=\'class2\';" Onchange="document.getElementById(\'champ2\').className=\'class3\';" Onblur="document.getElementById(\'champ2\').className=\'class3\';" size=20 class="class3"></td>
    </tr>
  </table>
</td>
<td id="fields2" style="display:none;" colspan=7>
  <table>
    <tr>
      <td><select class="deroulant" name="select1" id="select1">liste d'option</select></td><td>&nbsp;</td>
      <td class="texte">champ3:</td>
      <td><input type="text" value="" name="champ3" id="champ3" Onclick="document.getElementById(\'champ3\').className=\'class2\';" Onchange="document.getElementById(\'champ3\').className=\'class3\';" Onblur="document.getElementById(\'champ3\').className=\'class3\';" size=20 class="class3"></td>
      <td>&nbsp;</td>
      <td class="texte">champ4:</td>
      <td><input type="text" value="" name="champ4" id="champ4" Onclick="document.getElementById(\'champ4\').className=\'class2\';" Onchange="document.getElementById(\'champ4\').className=\'class3\';" Onblur="document.getElementById(\'champ4\').className=\'class3\';" size=20 class="class3"></td>
    </tr>
    <tr>
      <td><select class="deroulant" name="select2" id="select2">liste d'option</select></td>
      <td>&nbsp;</td>
      <td class="texte">champ5:</td>
      <td><input type="text" value="" name="champ5" id="champ5" Onclick="document.getElementById(\'champ5\').className=\'class2\';" Onchange="document.getElementById(\'champ5\').className=\'class3\';" Onblur="document.getElementById(\'champ5\').className=\'class3\';" size=20 class="class3"></td>
      <td>&nbsp;</td>
      <td class="texte">champ6:</td>
      <td><input type="text" value="" name="champ6" id="champ6" Onclick="document.getElementById(\'champ6\').className=\'class2\';" Onchange="document.getElementById(\'champ6\').className=\'class3\';" Onblur="document.getElementById(\'champ6\').className=\'class3\';" size=20 class="class3"></td>
    </tr>
  </table>
</td>

(c'est moi qui ait rajouté les sauts de ligne et l'indentation à la mano là...)

et voici mon code qui switch le display des 2 cellules...

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
 
function check_test(test) {
	fields = document.getElementById("fields");
	fieldsbis = document.getElementById("fields2");
	if(test == '05' || test == '08') {
		fields.style.display = "none";
		fieldsbis.style.display = "table-cell";
		//height = "530px";
	} else {
		fields.style.display = "table-cell";
		fieldsbis.style.display = "none";
		//height = "500px";
	}
	//parent.resize_fc(height);
}

IE me pond une erreur JS à l'affichage de la page dans le code HTML plus haut... (invalid character)

Et donc il me pond aussi une erreur lors de l'execution de ma fonction :
"Object doesn't support this property or method" sur le premier getElementById...

[E.Bzz]

IE me pond une erreur JS à l'affichage de la page dans le code HTML plus haut... (invalid character)

Et donc il me pond aussi une erreur lors de l'execution de ma fonction :
"Object doesn't support this property or method" sur le premier getElementById...

Il ne faut pas générer les antislash (\)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<td><input type="text" value="" name="champ1" id="champ1" Onclick="document.getElementById(\'champ1\').className=\'class2\';" Onchange="document.getElementById(\'champ1\').className=\'class3\';" Onblur="document.getElementById(\'champ1\').className=\'class3\';" size=20 class="class3"></td>

EDIT : idem pour "champ2" ...

A+

[E.Bzz]

En bonus :
puisque tu fais à chaque fois référence au champ lui-même, tu peux remplacer

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById('champ1') // ou champ2

par

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

this

A+

[Darkroro]

erf oui... les antislash j'y avais pas pensé... je les avais généré à la base pour le innerHTML qui passait pas sans les antislashs... mais bon maintenant ça marche avec le display je peux les virer...

et pour le this c'est clair j'y ai pas du tout pensé...

Bon j'ai plus d'erreur à la génération de ma page sous IE mais mon getElementById dans ma fonction ne passe toujours pas... on a pas le droit sous IE de faire getElementById d'un <td id="qqchose"> ??


EDIT : merci pour toutes vos réponses en tout cas, je viens d'appliquer tout vos conseils, ça clarifie un peu tout mon bordel...

[E.Bzz]

Et du coup, ça donne quoi ?

A+

[vermine]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
//fieldsbis.style.display = "table-cell";
fieldsbis.style.display = "";

[Darkroro]

hum... la même chose sans les antislash et avec des "this" un peu partout...

me reste plus que l'erreur sur ma fonction JS à régler


EDIT : je viens de test l'astuce de vermine, ça passe pas
EDIT : j'oublie de donner l'erreur : "impossible d'obtenir la propriété display: argument non valide" ça me dit sous IE

[E.Bzz]

mais mon getElementById dans ma fonction ne passe toujours pas... on a pas le droit sous IE de faire getElementById d'un <td id="qqchose"> ??

Ben, avec "none" ça pose un problème de structure de la table

Tu as essayé de masquer plutôt la <table> contenue dans le td ?

A+

[E.Bzz]

Visiblement, suivant le cas, tu cherche à afficher soi un td, soi l'autre, c'est ça ?

Si oui, il vaudrait mieux ne laisser qu'un seul td, avec tes 2 <table> à l'intérieur.
Suivant le cas, c'est ces tables contenues dans le <td> que tu masqueras ou afficheras.

Comme ça, plus de problème de structure de la table ...

A+

[Darkroro]

ça devrait pas poser de soucis de structure puisque j'intervertis 2 cell m'enfin... je test ça de suite...

[E.Bzz]

ça devrait pas poser de soucis de structure puisque j'intervertis 2 cell m'enfin... je test ça de suite...

Logiquement, non, mais il s'agit d'IE
Ceci dit, "entre" tes 2 instructions (masquage du 1° puis affichage du 2°), la table passe par un état incorrect

Ca semble confirmer par ton EDIT :

EDIT : j'oublie de donner l'erreur : "impossible d'obtenir la propriété display: argument non valide" ça me dit sous IE

A+