[AJAX] Tables différence entre IE et Firefox

Version imprimable

Bonjour j'ai un petit problème j'utilise l'AJAX pour renvoyer le traitement d'un form en php et suivant que j'utilise IE ou Firefox le résultat est différent (ici différent = génant ..).
La première ligne de la table renvoyée n'est pas interprétée de la meme facon et seulement la première ligne o_O
Voyez par vous meme:
http://img246.imageshack.us/img246/3563/ieresultan8.jpg avec IE et http://img529.imageshack.us/img529/6...xresultfs0.jpg avec Firefox.

Le code correspondant a la table a renvoyer est comme ceci:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 while($row = mysql_fetch_assoc($res)){ echo " <tr> <td> <form name='form_".$row["p077_Deal_Log_ID"]."' action='Deal_infos.php?id=".$row["p077_Deal_Log_ID"]."' target='_blank' method='post'> <input type='image' src='../pics/icone.bmp'> </form> </td> <td>".$row["p077_DPTID"]."</td> [.....] <td>".$row["Issues"]."</td> </tr>"; }
En plus c'est une boucle donc je vois pas pourquoi il interprete mal la première ligne et mal les suivantes ..

Si quelqu'un pouvait me mettre sur la voie merci :)

Pour relancer mon sujet vu que j'ai pas de réponse et toujours mon probleme, le code html retourné du tableau avec firefox est le suivant:
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 <table name="task_result" border="1"> <tbody> <tr class="menu_tr"> <td></td> <td>Type</td> <td>Description</td> <td>Due Date</td> </tr> <tr> <td><input src="../pics/icone.bmp" type="image"></td> </tr> <td></td> <td>30 day letter</td> <td></td> </tbody> <tr> <td><form name="form_15" action="Task_infos.php?id=15" target="_blank" method="post"><input src="../pics/icone.bmp" type="image"></form></td> <td></td> <td>30 day letter</td> <td></td> </tr>
Pour la suite les tr sont normaux et a la fin la table est bien fermée. Ce que je ne comprend pas c'est ce que viens faire le tbody et pourquoi le premier form n'est pas pris en compte o_O il ferme meme le tr avant..

19/06/2007, 11h54
Malarkey
C'est simple, c'est parce que les normes W3C pour créer un tableau avec des lignes sont
Code:

1 2 3 4 5 6 7 <table> <tbody> <tr> <td></td> </tr> </tbody> </table>
Firefox ne comprend pas si tu ne mets pas de <tbody>

J'ai déjà eu ce problème avant, et maintenant, je me plis aux normes : dès que je créer un tableau, je n'oublie plus mes TBODY! En plus, pour infos, tu peux mettre plusieurs TBODY dans un meme tableau!

Je me doutais que le probleme venait de la donc j'ai un peu bidouiller sur la table que le javax renvoie. J'ai rajouté les <tbody> pour chaque <tr> de la boucle, mais ca ne marche toujours pas pour firefox .. :(
J'ai aussi essayé d'en mettre seulement un juste après le <table> et de le fermer après tous les <tr> avant le </table> mais la non plus aucun changement.

C'est meme pire en mettant les <tbody>, la table se ferme apres un premier passage dans la boucle:
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 <div id="query_result_task" style="display: inline;"> <table name="task_result" border="1"> <tbody> <tr class="menu_tr"> <td></td> <td>Type</td> <td>Description</td> <td>Due Date</td> </tr> </tbody> //Début de la boucle, premiere ligne renvoyée <tbody> <tr> <td><input src="../pics/icone.bmp" type="image"></td> </tr> <td></td> <td>a</td> <td></td> </tbody> </table> //Seconde ligne renvoyée de la boucle <tbody> <tr> <td><form name="form_3" action="Task_infos.php?id=3" target="_blank" method="post"><input src="../pics/icone.bmp" type="image"></form></td> <td></td> <td>dfgg</td> <td></td> </tr> </tbody>

20/06/2007, 06h58
xk155

Bonjour,

Dans la première boucle renvoyée, la fermeture de ligne (</tr>) se trouve aprés la première cellule (<td>...</td>). Ce qui logiquement se traduit par : "passes à la ligne aprés la première cellule...". Puis il n'y a aucune ouverture de nouvelle ligne et des définitions de cellules... Tu m'étonnes que ça bug...

1/ Enlève toutes tes balises <TR> et </TR>
2/ Remplaces toutes tes balises <TBODY> et </TBODY> par des balises <TR> et </TR>
3/ Met bien la balise </TABLE> à la fin de ton tableau... et pas en plein milieu...

Et, Firefox comprend trés bien un tableau sans tbody... J'en met jamais (Honte à moi, je sais...) Par contre, je met toujours au moins un " " ou une image transparente dans mes <td></td>... Sinon, ça fait ce genre de bug...

Essayes...

Citation:

Bonjour,
Dans la première boucle renvoyée, la fermeture de ligne (</tr>) se trouve aprés la première cellule (<td>...</td>). Ce qui logiquement se traduit par : "passes à la ligne aprés la première cellule...". Puis il n'y a aucune ouverture de nouvelle ligne et des définitions de cellules... Tu m'étonnes que ça bug...

1/ Enlève toutes tes balises <TR> et </TR>
2/ Remplaces toutes tes balises <TBODY> et </TBODY> par des balises <TR> et </TR>
3/ Met bien la balise </TABLE> à la fin de ton tableau... et pas en plein milieu...

Et, Firefox comprend trés bien un tableau sans tbody... J'en met jamais (Honte à moi, je sais...) Par contre, je met toujours au moins un " " ou une image transparente dans mes <td></td>... Sinon, ça fait ce genre de bug...

Essayes...

:roll: le code que tu as lu et qui est a l'origine de ton message est le code renvoyé par ma boucle, il est erroné et a la base de mon problème. Ce que j'essaye de savoir c'est pourquoi il me retourne un code avec des <tr> nimporte ou et une <table> qui se ferme avant alors que la boucle est selon moi, tout ce qu'il y a de plus normale: Les <tr> et <td> bien ouverts et bien fermés, la table pareil. En présence des <tbody> ou non le problème persiste.

Ca peut peut etre venir des propriétés du div dans lequel je renvoie le traitement ou alors la fonction en Javax qui appelle la page de traitement n'est pas bonne pour fonctionner sous IE et Firefox..

Le div:
Code:

1 2 <div id='query_result_task' style='display:inline'> </div>
La fonction Ajax appelée:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 function go2(){ var xhr = getXhr(); // On défini ce qu'on va faire quand on aura la réponse xhr.onreadystatechange = function(){ // We do something only if everything is ok if(xhr.readyState == 4 && xhr.status == 200){ leselect = xhr.responseText; // We use innerHTML to add Options to the list document.getElementById('query_result_task').innerHTML = leselect; } } //On va vers la page Tasks_treatment.php xhr.open("POST","Tasks_treatment.php",true); xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); //On selectionne la valeur de l'option choisie de la liste deroulante sel_task = document.getElementById('task'); select = sel_task.options[sel_task.selectedIndex].value; //On envoie dans l'url xhr.send("sel_task="+select); }
La fonction getXhr() prend en compte IE et Firefox et la fonction go2() est presque identique a celle du tuto de ce site.

22/06/2007, 12h46
xk155

ok, désolé... j'avais peut-être pas tout lu...

A mon avis l'erreur est dans le script php qui génére les résultats.

Parce-qu'à priori, un innerHTML ne fait que met le code qu'il reçoit dans un div...

Peux-tu mettre le code complet de génération des résultats des boucles ?

Désolé du temps de réponse j'ai eu quelque petits problèmes persos ..
Donc le code complet qui renvoie la boucle oui le voila:

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
<?php
//ouverture connection bdd
include ("../include/open_connection_database.php");
echo '
//premiere ligne de la table retournee avec les titres des champs
<table name="task_result" cellspacing="1" bgcolor="#F5F5F5" border="1">
	<tr class="menu_tr">
		<td></td>
		<td>Type</td>
		<td>Description</td>
		<td>Start Date</td>
		<td>Finish Date</td>
	</tr>
';

//Si on a selectionné un des choix proposé dans la liste déroulante
if(isset($_POST["sel_task"]))
{
        //Requete SQL, selection des taches concernées
	$res = mysql_query("SELECT * FROM M012_Tasks WHERE M012_Task_Master_SEQ_Status='".$_POST["sel_task"]."'");
        //Boucle qui renvoie les lignes du tableau
	while($row = mysql_fetch_assoc($res))
        {
		echo "
		<tr>
                        //Premiere colonne = image avec lien vers une page contenant les infos de cette tache
			<td>
                                <form name='form_".$row["M012_Task_ID"]."' action='Task_infos.php?id=".$row["M012_Task_ID"]."' target='_blank' method='post'> <input type='image' src='../pics/icone.bmp'>
				</form>
			</td>
                        <td>".$row["M012_Task_Driver_Proc"]."</td>
                        <td>".$row["M012_Task_Description"]."</td>
                        <td>".$row["M012_A_Task_due"]."</td>
                        <td>".$row["M012_A_Task_Expires"]."</td>
		</tr>";
	}
}	

echo '</table>';

include("../include/close_connection_database.php");
?>

Voila .. je vais essayer de voir si en virant le form dans la premiere colonne il y a toujours le probleme.

EDIT: En reregardant le code je m'appercoit que l'image renvoyée dans le form c'est un peu inutile.. en mettant juste l'image le problème disparait donc en rajoutant un lien ca devrait marcher, je test.

Bon voila ca marche très bien maintenant, c'est le form qui fesait tout fouarer ;)
En utilisant un simple lien c'est impec, ca supprime a la fois l'espace apres l'image et le saut de ligne:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 while($row = mysql_fetch_assoc($res)){ echo " <tr> <td><a href='Task_infos.php?id=".$row["M012_Task_ID"]."' target='_blank'><img src='../pics/icone.bmp' border='0'></a> </td> <td>".$row["M012_Task_Driver_Proc"]."</td> <td>".$row["M012_Task_Description"]."</td> <td>".$row["M012_A_Task_due"]."</td> <td>".$row["M012_A_Task_Expires"]."</td> </tr>"; }
Ca fait toujours plaisir de trouver la réponse sois-meme :O Merci pour l'aide et j'espere que ca servira a d'autres personnes.. Résolu ;)

28/06/2007, 11h10
Malarkey

Citation:

Envoyé par xk155

Bonjour,

Dans la première boucle renvoyée, la fermeture de ligne (</tr>) se trouve aprés la première cellule (<td>...</td>). Ce qui logiquement se traduit par : "passes à la ligne aprés la première cellule...". Puis il n'y a aucune ouverture de nouvelle ligne et des définitions de cellules... Tu m'étonnes que ça bug...

1/ Enlève toutes tes balises <TR> et </TR>
2/ Remplaces toutes tes balises <TBODY> et </TBODY> par des balises <TR> et </TR>
3/ Met bien la balise </TABLE> à la fin de ton tableau... et pas en plein milieu...

Et, Firefox comprend trés bien un tableau sans tbody... J'en met jamais (Honte à moi, je sais...) Par contre, je met toujours au moins un " " ou une image transparente dans mes <td></td>... Sinon, ça fait ce genre de bug...

Essayes...

Je sais plus si c'est IE ou Firefox, mais quand tu créer une table avec le DOM (document.createElement("table")), si tu n'affectes pas de balise tbody, ton tableau foirera à coup sur! Enfin voilà ;)