Discussion :

[abbenoit]

Bonjour,
je rencontre une difficulté en utilisant du javascript/ajax sous IE.
J'ai un tableau auquel je veux ajouter/enlever dynamiquement des lignes.
A l'affichage de la page, lorsque l'on ajoute une ligne au tableau, l'affichage ne pose pas de problème (la taille de la liste déroulante est correcte).
Mais, lorsque je supprime la ligne et que je la réinsère, la taille de la liste n'est pas celle attendue.
(Le problème ne se pose pas sous firefox où la taille de la liste est correcte).

Dans la fonction addProduit, j'ai également essayé de rajouter explicitement les largeurs des colonnes en faisant : newCell.width = '...%'; mais cela ne m'a pas permis de résoudre le problème.

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
 
// le bout de code d'affichage de la JSP
 
<table id="tblProduits" border="0" cellpadding="0" cellspacing="0" width="95%" style="margin-top : 0;" >
	<tr>
		<td width="10%" class="header_tableau"><bean:message key="EffectuerSaisieForm.refIdExt"/></td>
		<td width="20%" class="header_tableau"><bean:message key="EffectuerSaisieForm.refLibelle"/></td>
		<td width="15%" class="header_tableau"><bean:message key="EffectuerSaisieForm.stkQuantite"/></td>
		<td width="15%" class="header_tableau"><bean:message key="EffectuerSaisieForm.stkConsomme"/></td>
		<td width="15%" class="header_tableau"><bean:message key="EffectuerSaisieForm.stkRestant"/></td>
		<td width="15%" class="header_tableau"><bean:message key="EffectuerSaisieForm.valeur"/></td>
		<td width="10%" class="header_tableau">&nbsp;</td>
	</tr>		
	<tr onmouseover="this.bgColor='#EBEBEB'" onmouseout="this.bgColor='#E6F5FE'" bgcolor="#E6F5FE">
		<td width="10%" class="lignePaire_tableau"><html:text property="refIdExt" styleId="refIdExt" styleClass="inputFormulaire" size="7" maxlength="30" onchange="listeReferences();" disabled="true" /></td>
		<td width="20%" class="lignePaire_tableau">
			<select name="refLibelle" id="refLibelle" tabindex="-1" onchange="changerVl();">
				<option value=""></option>
			</select>
		</td>
		<td width="15%" class="lignePaire_tableau">&nbsp;</td>
		<td width="15%" class="lignePaire_tableau"><html:text property="stkConsomme" styleId="stkConsomme" styleClass="inputFormulaire" size="5" maxlength="10" /></td>
		<td width="15%" class="lignePaire_tableau">&nbsp;</td>
		<td width="15%" class="lignePaire_tableau">&nbsp;</td>
		<td width="10%" class="lignePaire_tableauIco"><a href="javascript:void(0)" onClick="javascript:addProduit()">
			<img src="../../../images/picto_plus.gif" alt="Ajouter le produit" border="0" /></a>
		</td>
	</tr>
</table>

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
// Suppression de la ligne (javascript)
function suppProduit(idLigneASupprimer, numLigne) {
 
	...
 
	//suppression de la ligne et de la suivante (ligne blanche)
	document.getElementById('tblProduits').deleteRow(numLigne);
	document.getElementById('tblProduits').deleteRow(numLigne);
 
	...
}

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
 
// ajout d'une ligne (javascript)
function addProduit() {
 
	...
 
	//Ajout d'une ligne au tableau (en fin de tableau)
	var newRow = document.getElementById('tblProduits').insertRow(nbLignes);
	newRow.className = 'lignePaire_tableau';
	newRow.bgColor = '#e6f5fe';
	newRow.onmouseover = new Function( "this.bgColor='#EBEBEB'");
	newRow.onmouseout=new Function( "this.bgColor='#E6F5FE'");
	var newCell = newRow.insertCell(0);
	newCell.className = 'lignePaire_tableau';
	newCell.innerHTML = refCom;
	newCell = newRow.insertCell(1);
	newCell.className = 'lignePaire_tableau';
	newCell.innerHTML = libelle;
	newCell = newRow.insertCell(2);
	newCell.className = 'lignePaire_tableau';
	newCell.innerHTML = qtStock;
	newCell = newRow.insertCell(3);
	newCell.className = 'lignePaire_tableau';
	newCell.innerHTML = qtConsommee;
	newCell = newRow.insertCell(4);
	newCell.className = 'lignePaire_tableau';
	newCell.innerHTML = qteApres;
	newCell = newRow.insertCell(5);
	newCell.className = 'lignePaire_tableau';
	newCell.innerHTML = valeur;
	newCell = newRow.insertCell(6);
	newCell.className = 'lignePaire_tableauIco';
	newCell.innerHTML = '<a href="javascript:void(0)" onClick="javascript:if(confirm(\'Etes vous sûr de vouloir supprimer cette ligne ?\'))suppProduit(' + dernierIdLigne + ', this.parentNode.parentNode.rowIndex)"><img alt="Supprimer le produit" src="../../../images/picto_suppr.gif" border=0></a>';
 
	//ligne vide
	nbLignes = parseInt(nbLignes,10) + 1;
	//Ajout d'une ligne au tableau (en fin de tableau)
	newRow = document.getElementById('tblProduits').insertRow(nbLignes);
	newCell = newRow.insertCell(0);
	newCell.innerHTML = '&nbsp;';
	newCell.colSpan = '7';
 
	... 
 
	return;
}

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
 
 
// ajax (dans action struts, java)
 
...
 
retour = "var o = null;\n";
retour = retour + "var s = document.forms[0].elements[\"sfId\"];\n";
retour = retour + "s.options.length = 0;\n";
retour = retour
		+ "s.options[s.options.length] = new Option(\"\",\"\");\n";
 
	for (Iterator it = sfs.iterator(); it.hasNext();) {
		SfBean sf = (SfBean) it.next();
		retour = retour + "s.options[s.options.length] = new Option(\""
				+ sf.getLibelle() + "\",\"" + sf.getId()+";"+sf.getActif()
				+ "\");\n";
	}
p_request.setAttribute("retour", retour);
 
...

1) Lorsque j'affiche le tableau pour la première fois, je ne rencontre pas de problème
2) je clique sur le bouton ajouter (croix verte)
3) je clique sur le bouton supprimer (croix rouge)
4) je veux ré-entrer le produit que je viens de supprimer, et là, le comportement est différent entre IE et Firefox

--> Image

Merci de m'indiquer si vous trouvez une erreur dans le code ou une piste de recherche.

[abbenoit]

Le problème a été reglé.
Ce n'est sûrement pas la façon la plus simple mais ça marche

Il "suffisait" ( ) dans l'action Ajax de supprimer la ligne puis de la recréer.

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
 
var nbLignes = parseInt(document.getElementById('nbLignes').value, 10);
if (isNaN(nbLignes)) nbLignes = 0;
document.getElementById('tblProduits').deleteRow(nbLignes + 1);
 
var newRow = document.getElementById('tblProduits').insertRow(nbLignes + 1);
newRow.className = 'lignePaire_tableau';
newRow.bgColor = '#e6f5fe';
var newCell = newRow.insertCell(0);
newCell.className = 'lignePaire_tableau';
newCell.innerHTML = '<input type="text" name="refIdExt" id="refIdExt" class="inputFormulaire" size="7" maxlength="30" onchange="listeReferences();" value="' + valeurRefCom + '" />';
var newCell = newRow.insertCell(1);
newCell.className = 'lignePaire_tableau';
var options = '';
for(i = 0; i < arrPrds.length; i++) {
	var temp = arrPrds[i];
	var arrCaract=temp.split(";");
	var libelle = '' + arrCaract[0];
	libelle = libelle.substring(1, libelle.length -1);
	var idRef = arrCaract[1];
	var pmp = arrCaract[2];
	var qteVL = arrCaract[3];
	var qtEnStock = arrCaract[4];
	var idExtRef  = arrCaract[5];
	var idCompose = idRef + ';' + pmp + ';' + qteVL + ';' + qtEnStock + ';' + idExtRef;
	options = options + '<option value="' + idCompose + '">' + libelle + '</option>';
}
var contenuStkConsomme = '';
if (arrPrds.length > 1) {
	options = '<option value=""> </option>' + options;
} else {
	var arrCaract=chaineRetour.split(";");
	contenuStkConsomme = arrCaract[3];
}
newCell.innerHTML = '<select name="refLibelle" tabindex="-1" id="refLibelle" onchange="changerVl();" >' + options + '</select>';
var temp2 = arrPrds[i];
var newCell = newRow.insertCell(2);
newCell.className = 'lignePaire_tableau';
newCell.innerHTML = '&nbsp;';
var newCell = newRow.insertCell(3);
newCell.className = 'lignePaire_tableau';
newCell.innerHTML = '<input type="text" name="stkConsomme" id="stkConsomme" size="5" maxlength="10" value="' + contenuStkConsomme + '">';
var newCell = newRow.insertCell(4);
newCell.className = 'lignePaire_tableau';
newCell.innerHTML = '&nbsp;';
var newCell = newRow.insertCell(5);
newCell.className = 'lignePaire_tableau';
newCell.innerHTML = '&nbsp;';
var newCell = newRow.insertCell(6);
newCell.className = 'lignePaire_tableau';
newCell.innerHTML = '<a href="javascript:void(0)" onClick="javascript:addProduit()"><img src="../../../images/picto_plus.gif" alt="Ajouter le produit" border="0" /></a>';

Cela a pour conséquence d'obliger IE à "rafraîchir" cette ligne du tableau.