Tableau : AJAX et PHP

Blobi · 12/05/2011, 16h08

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 :

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
 
 
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 :

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

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.

andry.aime · 13/05/2011, 09h44

Bonjour,

Deux remarques:
1- Tu n'envoie que le string "null" au form_budget.php qui n'est même pas dans une variable

. Si tu ne veux rien envoyer

Code :

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

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+.

Blobi · 13/05/2011, 10h28

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é !

Blobi · 13/05/2011, 14h40

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 :

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
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 :

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
 
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.

13/05/2011, 09h44	#2
andry.aime Rédacteur/Modérateur Andry Aimé Inscription : septembre 2007 Messages : 5 127 Détails du profil Informations personnelles : Nom : Andry Aimé Localisation : Ile Maurice Informations forums : Inscription : septembre 2007 Messages : 5 127 Points : 7 269 Points : 7 269	Bonjour, Deux remarques: 1- Tu n'envoie que le string "null" au form_budget.php qui n'est même pas dans une variable . Si tu ne veux rien envoyer Code : Sélectionner tout - Visualiser dans une fenêtre à part 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+.
	00

13/05/2011, 10h28	#3
Blobi Invité de passage Inscription : mai 2011 Messages : 3 Détails du profil Informations forums : Inscription : mai 2011 Messages : 3 Points : 0 Points : 0	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é !
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email