[AJAX] Tableau : AJAX et PHP

Version imprimable

Bonjour, je désire créer un tableau qui s'actualise par le biais d'un formulaire qui s'ouvre à l'aide d'une fenêtre pop up.
Je voudrais que ce tableau s'actualise sans recharger entièrement la page, d'ou l'utilisation de Ajax.
J'ai donc le code suivant pour ce qui est de la fonction ajouter une ligne.
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 function ajoutLigne() { //on doit ajouter une ligne TR var tr = document.createElement("tr"); var td1 = document.createElement("td"); var td2 = document.createElement("td"); var td3 = document.createElement("td"); var td4 = document.createElement("td"); var td5 = document.createElement("td"); var td6 = document.createElement("td"); var td7 = document.createElement("td"); td1.appendChild(document.createTextNode(" td1 ")); td2.appendChild(document.createTextNode(" td2 ")); td3.appendChild(document.createTextNode(" td3 ")); td4.appendChild(document.createTextNode(" td4 ")); td5.appendChild(document.createTextNode(" td5 ")); td6.appendChild(document.createTextNode(" td6 ")); td7.appendChild(document.createTextNode(" td7 ")); tr.appendChild(td1); tr.appendChild(td2); tr.appendChild(td3); tr.appendChild(td4); tr.appendChild(td5); tr.appendChild(td6); tr.appendChild(td7); //ajout de la ligne document.getElementById("").appendChild(tr);
jusque là ca va.

Ensuite j'ai donc mon formulaire, à remplir.
Ce que je voudrais c'est récupérer les données envoyées par le formulaire avec Ajax afin de les insérer dans le tableau.
Comment récuperer ces données ?
j'utilise cela :
Code:

1 2 3 4 xhr.open("POST", "form_budget.php", true); xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.send("null");
Pour afficher ce que j'ai récupérer comment dois-je procéder ?
JE voudrai remplacer les td1, td2, td3 par les valeur du formulaire.
JE précise : je suis débutante.

13/05/2011, 09h44
andry.aime

Bonjour,

Deux remarques:
1- Tu n'envoie que le string "null" au form_budget.php qui n'est même pas dans une variable :aie:. Si tu ne veux rien envoyer

Code:

xhr.send(null);

.
2- Pour ajouter de "tr" et "td", n'utilise pas document.createElement, regarde la FAQ.

Pour récupérer des valeurs retourner par AJAX, regarde cette discussion, mais lieu de remplir des inputs, tu les met dans les cellules.

Mais ce que je ne comprend pas, pourquoi tu n'utilises pas directement les valeurs envoyées via ajax que d'attendre ce qu'il retourne si ceux sont les même données?

A+.
13/05/2011, 10h28
Blobi

Oui désolée, j'ai rempli ce champ après avoir posté >_< .

Hum, au fait je rempli un formulaire qui implémente les données dans ma bbd, ce formulaire s'ouvre en pop-up à partir de la page principale dans lequel se trouve le tableau.
C'est pourquoi j'aimerai récuperer les données envoyées au serveur pour actualiser le tableau,ajouter des lignes, modifier les lignes du tableau etc...
Je jette un coup d'oeil au topic que tu m'as donné !

La fonction Addrow je n'arrive pas à l'activer depuis ma page si tant est qu'il faut l'activer d'ici.
Voilà mon nouveau code actualisé :

mon formulaire :

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
 
<html>
<head>
		<script type="text/javascript" src="path-to-the-script/tff.js"></script>
		<link href= "fiche.css" rel="stylesheet" type="text/css">
 
	</head>
	<body>
		<FORM METHOD="POST" ACTION="test.php">
			<TABLE BORDER=0>
			<TR>
				<TD>Beneficiaire : </TD>
				<TD>
							<SELECT name="beneficiaire">
							<OPTION VALUE=""> </OPTION>
				</TD>
			</TR>
			<TR>
				<TD>donneur </TD>
				<TD>
					<SELECT name="donneur">
					<OPTION VALUE=""> </OPTION>
				</TD>
			</TR>
			<TR>
				<TD>Reference  : </TD>
				<TD>	
					<SELECT name="ref">
					<OPTION VALUE="">
						<?php           
                                                        $query = "SELECT ref_pk FROM t_prestations";
                                                        $res = mysql_query($query);
                                                        $row = mysql_fetch_array($res);
                                                        do{             
                                                                echo "<option>";
                                                                echo $row['ref_pk'];
                                                                echo "</option>";
                                                                                }while($row = mysql_fetch_array($res));
                                                ?>	
					</OPTION>
				</TD>
			</TR>
			<TR>
				<TD>Action</TD>
				<TD>
					<INPUT type=text name="action">
				</TD>
			<TR>
				<TD>INITIAL</TD>
				<TD>
					<INPUT type=text name="initial">
				</TD>
			</TR>
			<TR>
				<TD>Avis</TD>
				<TD>
					<SELECT name="avis">
					<OPTION VALUE="Oui">Oui</OPTION>
					<OPTION VALUE="Non">Non</OPTION>
				</TD>
			</TR>
			<TR>
				<TD>Domaine </TD>
				<TD>
					<SELECT name="domaine">
					<OPTION VALUE="R"> R</OPTION>
					<OPTION VALUE="P">P</OPTION>
				</TD>
			</TR>
 
		</FORM>
		<INPUT TYPE="submit" VALUE="Ajouter" onclick="Addrow()">
	</body>				
</html>

et le code js

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 AddRow()
	{
		xhr.open("POST", "form_budget.php", true);
		xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		xhr.send("Beneficiaire=beneficiaire&donneur=donneur&reference=ref&action=saction&montant=initial&avis=avis&domaine=domaine");
 
		var newRow = document.getElementById('budget').insertRow(-1);
		var newCell = newRow.insertCell(1);
		newCell.innerHTML = 'beneficiaire';
		newCell = newRow.insertCell(2);
		newCell.innerHTML = 'donneur';
		var newCell = newRow.insertCell(3);
		newCell.innerHTML = 'reference';
		newCell = newRow.insertCell(4);
		newCell.innerHTML = 'action';
		var newCell = newRow.insertCell(5);
		newCell.innerHTML = 'initial';
		newCell = newRow.insertCell(6);
		newCell.innerHTML = 'avis';
		var newCell = newRow.insertCell(7);
		newCell.innerHTML = 'domaine';
		var newCell = newRow.insertCell(8);
		newCell.innerHTML = '[Modifier]';
		window.close();
	}

Et puis le tableau en question est dans un autre fichier, donc lorsque je clique. Les lignes ne sont pas rajoutées au tableau.
Je ne vois pas trop comment faire.