Discussion :

[dirty_harry]

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]

hidden ... sans majuscule ...

[E.Bzz]

Bonjour,

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]

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]

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

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]

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]

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.