[AJAX] Insérer des valeurs dans un tableau dont les cellules n'existent pas

Version imprimable

13/04/2010, 11h12
dirty_harry

[AJAX] Insérer des valeurs dans un tableau dont les cellules n'existent pas

Bonjour à tous;

J'ai crée un formulaire de saisie dont le fonctionnement est assez classique à base de javascript et d'ajax.
J'ai deux champs dont une liste déroulante en tête de formulaire puis un tableau dont les lignes et les cellules sont crée via javascript lorsque l'on clique sur un bouton. Je dois maintenant rajouter une nouvelle fonctionalité : les données saisie peuvent être modifié après coup, donc a chaque fois que l'on selectionne une valeur dans la liste déroulante en en-tête du formulaire je dois vérifier si des données exsiste dans la base et si c'est le cas les faire apparaitre dans le tableau pour qu'on puisse les modifier.

En passant par AJAX j'ai fait un script qui écrit dans le tableau, mon script PHP contient toute les balises <tr><td></td></tr> mais mon script JS me renvoit une "Erreur inconnue", je suis donc passé par un div dans le tableau, le résultat est assez horrible, il ne comprend plus rien a mes lignes (même s'il m'affiches les données qu'il faut sur le fond).

Je ne trouve pas la logique pour créer les cellules puis écrire dans le tableau

J'éspère avoir été claire, merci d'avance pour votre aide.
13/04/2010, 11h19
andry.aime

Bonjour,

Citation:

mais mon script JS me renvoit une "Erreur inconnue"

Peut-on voir les bouts de codes js et html concernés?

Je ne sais pas exactement dans quel morceau de code se produit l'erreur mais voici des extrait de code :

Code:

1
2
3
4
5
 
<table id="table2" name="table2" >
	<div id="TestPreExist" name="TestPreExist">
	</div>
</table>

Sa c'est ma table HTML dans lequel je rajoute des ligne via Javascript

Code:

1
2
 
<select name="tester" id="tester" onChange="CreerTableau()">

Le bout de formulaire qui, lorsqu'il est modifié appele la fonction qui va voire dans la base si il y'a des données

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
44
45
46
47
48
49
50
51
52
53
54
55
56
 
function CreerTableau(){
 
	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,'table2'); } //affectation fonction appelée qd on recevra la reponse
				// lancement de la requete
				http_request.open('POST', 'AjaxPlan.php5', true);
				//changer le type MIME de la requête pour envoyer des données avec la méthode POST ,  !!!! cette ligne doit etre absolument apres http_request.open('POST'....
 
	http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
 
	obj=document.forms['FormuSaisie'].elements['tester']; //on vient lire la valeur selectionnée ds la liste1
 
	data="param="+obj.value;//on envoie la valeur au script php en POST
 
	http_request.send("param="+obj.value);
 
}
 
 
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.');
		}
	}
}

Sa c'est les fonctions JavaScript, en fait il n'y a qu'un endroit ou je me sert du nom de la table, si je le remplace par le nom du div sa affiche quelque chose(mais pas très bien).
dans mon script PHP je n'ai pas de balise <table></table>mais que des tr et td

J'éssaie de régler ce problème en utilisant le XML (jusqu'a maintenant je ne l'utilisait pas :?) mais n'étant pas habitué a ce genre de pratique j'ai du mal à trouver comment parcourir le XML avec JavaScript, j'ai crée un XML d'exemple pour les test:

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
 $x='<?xml version=\"1.0\"?>\n'
$x=$x.'<Plan>\n';
	$x=$x.'<Ligne>\n';
		$x=$x.'<Cellule>\n';
		$x=$x.11;
		$x=$x.'</Cellule>\n';
		$x=$x.'<Cellule>\n';
		$x=$x.12;
		$x=$x.'</Cellule>\n';
		$x=$x.'<Cellule>\n';
		$x=$x.12;
		$x=$x.'</Cellule>\n';
		$x=$x.'<Cellule>\n';
		$x=$x.13;
		$x=$x.'</Cellule>\n';
	$x=$x.'</Ligne>\n';
	$x=$x.'<Ligne>\n';
		$x=$x.'<Cellule>\n';
		$x=$x.21;
		$x=$x.'</Cellule>\n';
		$x=$x.'<Cellule>\n';
		$x=$x.22;
		$x=$x.'</Cellule>\n';
		$x=$x.'<Cellule>\n';
		$x=$x.23;
		$x=$x.'</Cellule>\n';
	$x=$x.'</Ligne>\n';
	$x=$x.'<Ligne>\n';
		$x=$x.'<Cellule>\n';
		$x=$x.31;
		$x=$x.'</Cellule>\n';
		$x=$x.'<Cellule>\n';
		$x=$x.32;
		$x=$x.'</Cellule>\n';
		$x=$x.'<Cellule>\n';
		$x=$x.33;
		$x=$x.'</Cellule>\n';
	$x=$x.'</Ligne>\n';
$x=$x.'</Plan>\n';
header('Content-Type: text/xml'); 
echo $x;

j'ai trouvé dans les tutos de developpez cette fonctions :

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
 
function CreerTableau()
{
	var xhr=null;
	if (window.XMLHttpRequest) { 
		xhr = new XMLHttpRequest();
	}
	else if (window.ActiveXObject) 
	{
		xhr = new ActiveXObject("Microsoft.XMLHTTP");
	}
	//on définit l'appel de la fonction au retour serveur
	xhr.onreadystatechange = function() 
	{ var docXML= xhr.responseXML;
	var items = docXML.getElementsByTagName("Plan")
	//on fait juste une boucle sur chaque element "donnee" trouvé
	alert(items.length);
	for (i=0;i<items.length;i++)
	{
		alert (items.item(i).firstChild.data);
	}
	};
	//on appelle le fichier reponse.txt
	xhr.open("GET", "AjaxPlan.php5", true);
	xhr.send(null);
}

L'alerte que j'ai mise alert(items.length); me renvoi 0. La fonction se conduit comme si rien ne revenait de mon fichier PHP. Je n'arrive pas à trouver l'erreur.
Quelqu'un aurait-il une idée?