Masquer un Div compatibilité IE/FF

**dirty_harry** · 05/05/2010, 10h25

Bonjour a tous,
J'ai un formulaire dynamique (crée petit a petit via javascript dans les lignes d'un tableau) l'un des champs de ce formulaires doit pouvoir donner le choix entre une zone texte et une liste déroulanten j'ai donc deux div et mes deux champs (crée via Ajax) avec dans leurs style:
display:inline;
float:left;
lorsque je clique sur un boutton sa appele une fonction pour switcher sa marche nickel sous les deux navigateurs.
Par contre quand je click dans une combo, sa charge ma liste déroulante et la sa fait tout sauter (le div qui la contient est masqué initialement).

J'apelle donc une fonction qui masque le tout (div+ liste déroulant) et sa marche sous firefox mais pas sous IE, ou plutot sa marche a une condition=> que je mette une alerte au milieu de la fonction.
Voici ma fonction qui me permet de masquer lors du clique sur la combo:

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
 
function masqueUnique(nomElement,numero){
	if(tabLigneAlt[numero]==0 | document.getElementById('alt'+numero).value=='text'){
		if(document.getElementById(nomElement)){
			document.getElementById(nomElement).style.visibility='Hidden';
			document.getElementById(nomElement).style.width='0px';
			//alert(nomElement);
		}
		else if(document.forms['FormuSaisie'].elements['SProduct'+numero]){
			document.getElementById(nomElement).style.visibility='Hidden';
			document.getElementById(nomElement).style.width='0px';
			//alert(nomElement);
		}
		tabLigneAlt[numero]=1;
	}
}

j'ai essayé plusieurs solution (notament initialisé le style de la liste en masqué) mais aucune ne me convient pour mon formulaire et aucune ne marche tout a fait.
J'éspère avoir été clair, merci d'avance pour vos solution.

**SpaceFrog** · 05/05/2010, 10h46

hidden ... sans majuscule ...

**E.Bzz** · 05/05/2010, 10h49

Bonjour,

Envoyé par dirty_harry

lorsque je clique sur un boutton sa appele une fonction pour switcher sa marche nickel sous les deux navigateurs.
Par contre quand je click dans une combo, sa charge ma liste déroulante et la sa fait tout sauter (le div qui la contient est masqué initialement).

pourrais-tu détailler un peu plus ce qui se passe (un lien serait idéal) ?
De plus il faudrait voir les codes HTML et CSS correspondants

EDIT : il faudrait aussi la fonction qui "charge ta liste déroulante"
Et +1 pour le hidden ...

A+

**dirty_harry** · 05/05/2010, 11h25

merci pour le conseil sur H/hidden, c'est changé.
comme je ne peut pas fournir de lien, voici une "capture d'écran" en pièce jointe pour essayer de décrire le problème.
en ce qui concèrne le code HTML/CSS, il est géneré via JAVASCRIPT

Code :

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

1
2
<div id="tProduct'+it+'" STYLE="border-width:2;border-color:white;display:inline;visibility:visible;float:left"><input type="text" NAME="zproduct'+it+'" ID="zproduct'+it+'" ></div>
<div id="Product'+it+'" STYLE="visibility:hidden;display:inline;float: left;"></div><input type=buTton value="<>" onclick="alterne(\'tProduct'+it+'\',\'Product'+it+'\','+it+')" style="margin-left:25px" />

Voila pour le style du bloc qui pose problème.
quand tu dit la fonction qui appele la liste déroulante est-ce que c'est la fonction ajax ou la fonction qui switch?
pour cette dernière voici le 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
 
function alterne(Ztexte,liste,index)
{
	var tString=liste.toString();
	var lgeur=liste.length-1;
	var numero=tString.charAt(lgeur);
	var alter='alt'+numero;
 
	if (tab[index]==0){
		document.getElementById(Ztexte).style.visibility = 'HIDDEN';
		document.forms['FormuSaisie'].elements['zproduct'+numero].style.visibility='HIDDEN';
		document.getElementById(Ztexte).style.width = '0px';
		document.forms['FormuSaisie'].elements['zproduct'+numero].style.width='0px';
		document.getElementById(liste).style.visibility = 'VISIBLE';
		document.getElementById(liste).style.width = '150px';
		if(document.forms['FormuSaisie'].elements['SProduct'+numero]){
			document.forms['FormuSaisie'].elements['SProduct'+numero].style.width = '130px';
			document.forms['FormuSaisie'].elements['SProduct'+numero].style.visibility='VISIBLE';
		}
		document.getElementById(alter).value='list';
		tab[index]=1;
	}
	else{
		document.getElementById(liste).style.visibility = 'HIDDEN';
		document.getElementById(liste).style.width = '0px';
		//alert(document.getElementById(liste).style.width);
		if(document.forms['FormuSaisie'].elements['SProduct'+numero] || document.getElementById['SProduct'+numero] ){
			document.forms['FormuSaisie'].elements['SProduct'+numero].style.visibility='HIDDEN';
			document.forms['FormuSaisie'].elements['SProduct'+numero].style.width='0px';
		}
		document.getElementById(Ztexte).style.visibility = 'VISIBLE';
		document.forms['FormuSaisie'].elements['zproduct'+numero].style.visibility='VISIBLE';
		document.getElementById(Ztexte).style.width = '130px';
		document.forms['FormuSaisie'].elements['zproduct'+numero].style.width='150px';			
		document.getElementById(alter).value='text';
		tab[index]=0;
	}
}

**E.Bzz** · 05/05/2010, 11h38

Envoyé par dirty_harry

quand tu dit la fonction qui appele la liste déroulante est-ce que c'est la fonction ajax ou la fonction qui switch?

Envoyé par E.Bzz

il faudrait aussi la fonction qui "charge ta liste déroulante"

Ajax donc

Sinon, heu ... tu cherches les problèmes avec tes id

Y a une raison à ça ?

Code :

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

id="tProduct'+it+'"

A+

**E.Bzz** · 05/05/2010, 11h39

Sinon, pour IE il faut que ton PHP (réponse Ajax) génère aussi les tag <select> et </select> en plus des options. C'est bien le cas ?

A+

**dirty_harry** · 05/05/2010, 13h00

pour le

Code :

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

id="tProduct'+it+'"

la raison est simple: j'ai plusieurs champs dans mon formulaire mais je ne sais pas combien a l'avance je les crées donc avec les noms tProduct1; tProduct2...
en ce qui concerne l'ajax, j'utilise une fonction générique (trouvé sur le web et remanié pour répondre à mon besoin):

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
 
function makeRequest(url,id_lire,id_ecrire)
{
	var http_request = false;
	//créer une instance (un objet) de la classe désirée fonctionnant sur plusieurs navigateurs
	if (window.XMLHttpRequest) { // Mozilla, Safari,...
		http_request = new XMLHttpRequest();
		if (http_request.overrideMimeType) {
			http_request.overrideMimeType('text/xml');//un appel de fonction supplémentaire pour écraser l'en-tête envoyé par le serveur, juste au cas où il ne s'agit pas de text/xml, pour certaines versions de navigateurs Mozilla
		}
	}
	else if (window.ActiveXObject) { // IE
		try {
				http_request = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try {
				http_request = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e) {}
		}
	}
	if (!http_request) {
		alert('Abandon :( Impossible de créer une instance XMLHTTP');
		return false;
	}
	http_request.onreadystatechange = function() { traitementReponse(http_request,id_ecrire); } //affectation fonction appelée qd on recevra la reponse
	// lancement de la requete
	http_request.open('POST', url, true);
	http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	obj=document.forms['FormuSaisie'].elements[id_lire]; //on vient lire la valeur selectionnée ds la liste1
	var data="param="+obj.value+"&paramnum="+id_lire;//on envoie la valeur au script php en POST
	var VarRecup;
	if(url=='ajaxProduct.php5' || url=='ajaxPC.php5'){
		var tString=id_lire.toString();
		var lgeur=id_lire.length-1;
		var numero=tString.charAt(lgeur);
		var nomRadio='type'+numero;
		for(var k=0;k<2;k++){
 
			if(document.getElementsByName(nomRadio)[k].checked){
				VarRecup=document.getElementsByName(nomRadio)[k].value;
				//alert(VarRecup);
			}
		}
		data=data+"type="+VarRecup;
	}
 
	http_request.send("param="+obj.value+"&paramnum="+id_lire+"&Type="+VarRecup);
	//http_request.send(data);
}
/**
* Méthode qui sera appelée sur le click du bouton
*/
//partie traitement de la réponse
function traitementReponse(http_request,id_ecrire) {
	//qd on recoit la reponse:
	if (http_request.readyState == 4) {
		if (http_request.status == 200) {
			// cas avec reponse de PHP en mode texte:
 
			var reponse=http_request.responseText;
			//alert(reponse); //TEST
			//	on va ecrire la réponse, c a d la liste2 dans le div qui a pour id  id_ecrire
			var obj=document.getElementById(id_ecrire);
			obj.innerHTML=reponse;
		} 
		else {
			alert('Un problème est survenu avec la requête.');
		}
	}
}

en ce qui concerne le php (fichier ajaxProduct.php)

Code :

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

1
2
3
4
5
6
7
8
$reponse='<select ID="SProduct'.$numero.'" name="SProduct'.$numero.'" STYLE="" onchange="makeRequest(\'ajaxThuput.php5\',\'SProduct'.$numero.'\',\'QTYpH'.$numero.'\');makeRequest(\'ajaxPC.php5\',\'SProduct'.$numero.'\',\'PackCode'.$numero.'\');" onClick="ModifInput(\'Time1\',\'thuput'.$numero.'\',\'Objectif'.$numero.'\',\'wip'.$numero.'\'));CalculPrio('.($numero+1).',\'Time1\');" onBlur="ModifInput(\'Time1\',\'thuput'.$numero.'\',\'Objectif'.$numero.'\',\'wip'.$numero.'\');CalculPrio('.($numero+1).',\'Time1\');">';
$reponse.='<option value="-1">S&eacute;lectionnez un produit</option>';
foreach  ($connect2->query($sql) as $row) {
	//print '<option value="'.$row['matews_diecode'].'">'.$row['matews_diecode']. "</option>";
	$reponse.='<option value="'.$row['produit'].'">'.$row['produit'].'</option>';
}
$reponse.='</select>';
print $reponse;

ce n'est que l'extrait qui génère la liste, comme tu le voit les balises <select></select> y sont bien présentes.

**E.Bzz** · 05/05/2010, 15h24

Envoyé par dirty_harry

pour le

Code :

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

id="tProduct'+it+'"

la raison est simple: j'ai plusieurs champs dans mon formulaire mais je ne sais pas combien a l'avance je les crées donc avec les noms tProduct1; tProduct2...

Oui ... sous réserve de faire ça en PHP.
Or ça ne ressemble pas à du PHP.
Il y a donc peu de chances que ça fonctionne (en tous cas aucune en HTML / Javascript).
Tu te retrouves donc avec des id dupliqués (et de toutes façons a priori invalides), ce qui a de grandes chances d'être la (ou une des) source(s) de ton problème ...

EDIT : sinon le reste semble correct

A+

**dirty_harry** · 05/05/2010, 15h37

ce code est généré via javascript : mon formulaire est généré dans un tableau et j'utilise la fonction AddRow, j'ai une variable globale qui contient le nombre de ligne déja inséré et donc je sais quel valeur saisir dans it. je l'effectue également quand c'est nécessaire en PHP. je vais quand même vérifié du coté des identifiant multiples

**dukej** · 05/05/2010, 15h38

pourquoi tu n'utilises pas display:none au lieu de visibility ?

**E.Bzz** · 05/05/2010, 15h52

Envoyé par dirty_harry

je vais quand même vérifié du coté des identifiant multiples

Bonne idée

Profites-en pour vérifier la valeur réel de chaque id

Envoyé par dukej

pourquoi tu n'utilises pas display:none au lieu de visibility ?

Ce n'est pas la même chose. Chacun répond à un besoin différent ...

A+

**dukej** · 05/05/2010, 16h48

Envoyé par E.Bzz

Bonne idée

Profites-en pour vérifier la valeur réel de chaque id

Ce n'est pas la même chose. Chacun répond à un besoin différent ...

A+

J'en suis bien conscient, le visibility:hidden cache l'élément mais le laisse dans le flux alors que le display:none cache l'élément et le sort du flux.
Notre ami dans son code fait après le visibility = 'hidden', un style.width = '0px'; donc pour moi dans ma tête notre cher monsieur cherche à tout prix à faire disparaître son bloc.

son problème est lié à une différence entre IE et FF, et moi dans ma tête je me dis simplement :
- width sous IE 6 est équivalent à un min-width, et donc l'élément gardera toujours la largeur de son contenu et donc gênera encore, alors que sous firefox, le fait de faire un elm.style.width = '0px' force bien cet élément à une largeur de 0 px.

De plus il ne nous indique pas si c'est sous IE6 ou 7 ou 8, et vu le code qui me paraît un peu "débutant" je me dit aussi que notre cher ami n'a pas mis de doctype sur sa page, ce qui entraine forcément le navigateur à passer en mode quirks. Et qui dit mode quirks veut dire que IE7 et IE8 se même en mode de rendu IE6 quirks et donc du coup le width = '0px' a le même comportement sous IE6.

**E.Bzz** · 05/05/2010, 17h04

Tu as raison.

Et je pense que dirty_harry devrait s'intéresser à ta réponse dès qu'il aura réglé ses problèmes d'id (ou vérifié qu'il n'y a pas de problème).

Car sans id valide, display ou visibilty ne changera pas grand chose

A+

**dirty_harry** · 06/05/2010, 11h20

Merci beaucoup pour votre aide; le problème c'est résolu en changeant mes lignes
style.visibility = 'hidden' et style.width = '0px'; en display='none'; et tout marche sur firefox et sous IE. merci beauoucp pour votre aide.

Masquer un Div compatibilité IE/FF

JavaScript

Discussions similaires

Partager

Partager