[AJAX] Gérer un tableau dynamique

**Lydie12** · 12/07/2011, 14h09

Bonjour,

Je commence à appréhender ajax.
pour le moment, j'ai une base de données et sur une page html j'affiche les données de ma base dans un tableau.
Grâce à ajax j'arrive à afficher les données dernièrement insérer sans avoir à actualiser ma page. Mais j'aimerai arriver maintenant (via un bouton sur chaque ligne) à supprimer les enregistrements de ma base et du tableau par la meme occasion.
Mais je n'y arrive pas.
J'ai une seule table appelé :
Test_ajax
elle se compose de 4 champs :
- id_champ qui est l'identifiant (auto-incrémenté)
- contact
- description
- travail

test_ajax.php

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
 
<?php
header("Content-Type: text/html; charset=iso-8859-1");
mysql_connect("**","**","**");
mysql_select_db("**");
 
if (isset($_POST['contact']) && isset($_POST['description']) && isset($_POST['travail'])) 
{
    if (!empty($_POST['contact']) && !empty($_POST['description']) && !empty($_POST['travail'])) 
    {
        mysql_query("INSERT INTO Test_ajax(contact,description,travail) VALUES('".$_POST['contact']."', '".$_POST['description']."', '".$_POST['travail']."')");
    }
}
$reponse = mysql_query("SELECT * FROM Test_ajax");
echo '<table border=1>';
while($val = mysql_fetch_array($reponse))
{
        echo '<tr><td>'.$val['id_champ'].'</td><td>'.$val['contact'].'</td><td>'.$val['description'].'</td><td>'.$val['travail'].'</td><td><input type="button"></td></tr></td>';
}
echo '</table>';
?>

et test_ajax.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
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
 
function getXMLHttpRequest() 
{
	var xhr = null;
 
 
	if (window.XMLHttpRequest || window.ActiveXObject)
	{
		if (window.ActiveXObject) 
		{
			try 
			{
				xhr = new ActiveXObject("Msxml2.XMLHTTP");
			} 
			catch(e) 
			{
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			}
		} 
		else
		{
			xhr = new XMLHttpRequest(); 
		}
	}
	else
	{
		alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
		return null;
	}
 
	return xhr;
}
 
 
var xhr = getXMLHttpRequest();
 
 
function refreshpage() 
{
	var xhr = getXMLHttpRequest();
	xhr.onreadystatechange = function() {
 
		if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
			document.getElementById('test_ajax').innerHTML = xhr.responseText;
		}
	};
 
	xhr.open("GET", "test_ajax.php", true); 
	xhr.send(null); 
	var timer=setInterval("refreshpage()", 5000); 
}
 
function submitpage()
{
	var xhr = getXMLHttpRequest();
encode (encodeURIComponent)
	var contact = encodeURIComponent(document.getElementById('contact').value);
	var description = encodeURIComponent(document.getElementById('description').value);
	var travail = encodeURIComponent(document.getElementById('travail').value);
	xhr.onreadystatechange = function() {
		if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
			document.getElementById('test_ajax').innerHTML = xhr.responseText;
		}
	};
 
	xhr.open("POST", "test_ajax.php", true); 
	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
	xhr.send("contact="+contact+"&description="+description+"&travail="+travail); 
}

Merci d'avance de votre aide.

**andry.aime** · 12/07/2011, 15h07

Bonsoir,

Crée une fonction Ajax qui va lancer la suppression dans la base et une fois l'enregistrement supprimer, tu supprimes la ligne du tableau.

Code php :

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

echo '<tr id="ligne'.$val['id_champ'].'"><td>'.$val['id_champ'].'</td><td>'.$val['contact'].'</td><td>'.$val['description'].'</td><td>'.$val['travail'].'</td><td><input type="button" onclick="supprime('.$val['id_champ'].')"></td></tr></td>';

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
function supprime(id){
	var xhr = getXMLHttpRequest();
	xhr.onreadystatechange = function() {
		if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
			if(xhr.responseText=="OK"){
				var a = document.getElementById="ligne"+id;
				a.parentNode.removeChild(a);
			}
		}
	};
 	xhr.open("POST", "pageQuiSupprime.php", true); 
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	xhr.send("id="+id); 
 
}

A+.

**Lydie12** · 12/07/2011, 16h02

Merci andry.aime pour ta réponse.

Maintenant, pour gérer le dynamisme au maximum, je voudrais ajouter un bouton modifier qui renvoie les données du tableau dans mon formulaire de saisie et qui permet de modifier les données
(donc un update dans la base).
Mais je sais pas si c'est faisable et surtout comment...

**andry.aime** · 13/07/2011, 09h19

Crée un formulaire caché, lors du click sur le bouton Modifier, tu récupères les valeurs du tableau pour le mettre dans le formulaire ou tu lances une requête AJAX pour récupérer les valeurs du serveur pour remplir ton formulaire. Tu affiches ensuite le formulaire une fois rempli.

A+.

**Lydie12** · 14/07/2011, 18h26

Merci andry.aime, mais j'ai pas tout compris.

J'ai ma page html avec le tableau de base pour saisir les données, en dessous il y a un bouton envoyer et modifier. Puis il y a mon tableau qui a été généré par la page php.
Je voudrais que quand je sélectionne une ligne de ma liste, les informations soient remises dans le tableau de saisie. Puis en cliquant sur modifier ca fait l'update.
Autant faire l'update, ca ne sera pas compliqué (ca revient un peu à ce que j'ai fait précédemment avec insert et delete), mais c'est pour rappeler mes données, ca demande de recharger la page et là je bloque totalement.
Puisque je veux pas avoir d'autres tableaux (ou formulaire dans ma page que ceux que j'ai déjà)

**Lydie12** · 26/07/2011, 21h45

Depuis la dernière fois, j'ai quand meme un peu avancé, voir pas mal. Mais là je bloque totalement sur un probleme depuis 2 jours et j'avance plus, plus je reflechis, plus je me casse la tete dessus.
Alors j'ai ma page test_ajax.php qui contient maintenant mon "formulaire" pour saisir mes données et donc qui ressemble à ca :

test_ajax.php

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
<html>
<head>
<title>TEST AJAX</title>
<script type="text/javascript" language=JavaScript src="./autoCompletion_module/autoCompleteur.js"></script>
<script language="javascript" src="test_ajax.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
</head>
<body>
<?php
if (isset($_POST['ident']))
{
mysql_connect("****","****","****");
mysql_select_db("****");
$res=mysql_query("select contact, description, travail from Test_ajax where id_champ='".$_POST['ident']."'");
$donnees=mysql_fetch_array($res);
$ident = $_POST['ident'];
$contact = $donnees['contact'];
$description = $donnees['description'];
$travail = $donnees['travail'];
}
else
{
$ident= '';
$contact = '';
$description = '';
$travail = '';
}
?>
	<table>
	<thead>
	  <th>Contact</th>
		<th>Description</th>
		<th>Travail</th>
	</thead>
	<tr>
		<td>
		<input type="hidden" name="ident" id="ident" value="<?php echo $ident; ?>">
		<INPUT type="text" size="40\" name="contact" id="contact"  onFocus=""  value="<?php echo $contact; ?>" onBlur="" ></td>
		<td><input type="text" name="description" cols="60" rows="5" class='campos-form' id="description" value="<?php echo $description; ?>"></textarea></td>
		<td><input type="text" name="travail" cols="60" rows="5" class='campos-form' id="travail" value="<?php echo $travail; ?>"></textarea></td>
	</tr>
</table>
 
<input type="button" value="Ajouter" onclick="submitpage();"/>
<input type="button" value="Modifier" onclick="update();"/>
<div id="test_ajax"></div>
</body>
</html>

J'ai ma page
test_ajax.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
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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
function getXMLHttpRequest() 
{
	var xhr = null; 
	if (window.XMLHttpRequest || window.ActiveXObject)
	{
		if (window.ActiveXObject)
		{
			try
			{
				xhr = new ActiveXObject("Msxml2.XMLHTTP");
			} 
			catch(e)
			{
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			}
		} 
		else
		{
			xhr = new XMLHttpRequest(); 
		}
	}
	else
	{
		alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
		return null;
	}
	return xhr;
}
var xhr = getXMLHttpRequest();
 
 
function refreshpage() 
{
	var xhr = getXMLHttpRequest();
	xhr.onreadystatechange = function() {
		if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
			document.getElementById('test_ajax').innerHTML = xhr.responseText;
		}
	};
 
	xhr.open("GET", "insert_line.php", true);
	xhr.send(null);
}
 
 
function submitpage()
{
	var xhr = getXMLHttpRequest();
	var contact = encodeURIComponent(document.getElementById('contact').value);
	var description = encodeURIComponent(document.getElementById('description').value);
	var travail = encodeURIComponent(document.getElementById('travail').value);
	xhr.onreadystatechange = function() {
		if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
			document.getElementById('test_ajax').innerHTML = xhr.responseText;
		}
	};
 
	xhr.open("POST", "insert_line.php", true);
	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	xhr.send("contact="+contact+"&description="+description+"&travail="+travail);
 
}
 
function supprime(ident){
	var xhr = getXMLHttpRequest();
	xhr.onreadystatechange = function() {
		if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
			if(xhr.responseText=="OK"){
				var a = document.getElementById="ligne"+id;
				a.parentNode.removeChild(a);
				document.getElementById('test_ajax').innerHTML = xhr.responseText;
			}
		}
	};
 	xhr.open("POST", "delete_line.php", true); 
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	xhr.send("ident="+ident);
}
 
function updatepage(ident)
{
	var xhr = getXMLHttpRequest();
	var contact = encodeURIComponent(document.getElementById('contact').value);
	var description = encodeURIComponent(document.getElementById('description').value);
	var travail = encodeURIComponent(document.getElementById('travail').value);
	xhr.onreadystatechange = function() {
		if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
			document.getElementById('test_ajax').innerHTML = xhr.responseText;
		}
	};
 
	xhr.open("POST", "test_ajax.php", true);
	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	xhr.send("ident="+ident);
}
 
function update()
{
	var xhr = getXMLHttpRequest();
	var contact = encodeURIComponent(document.getElementById('contact').value);
	var description = encodeURIComponent(document.getElementById('description').value);
	var travail = encodeURIComponent(document.getElementById('travail').value);
	xhr.onreadystatechange = function() {
		if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
			document.getElementById('test_ajax').innerHTML = xhr.responseText;
		}
	};
 
	xhr.open("POST", "update_line.php", true);
	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	xhr.send("ident="+ident+"&contact="+contact+"&description="+description+"&travail="+travail);
 
}

Et mes autres pages ne servent qu'à faire les actions sur la base de données, je vais montrer
update_line.php

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
<?php
header("Content-Type: text/html; charset=iso-8859-1");
mysql_connect("localhost","root","");
mysql_select_db("BaseGestion");
if (isset($_POST['ident'])) 
{
	if (!empty($_POST['ident']))
	{
		mysql_query("UPDATE Test_ajax SET contact='".$_POST['contact']."', description='".$_POST['description']."', travail='".$_POST['travail']."' WHERE id_champ=".$_POST['ident']."");
	}
}
$resu = mysql_query("SELECT * FROM Test_ajax");
echo '<table border=1>';
while($val = mysql_fetch_array($resu))
{
	echo '<tr><td>'.$val['id_champ'].'</td><td>'.$val['contact'].'</td><td>'.$val['description'].'</td><td>'.$val['travail'].'</td><td><input type="button" value="supprimer" onclick="supprime('.$val['id_champ'].')"></td><td><input type="button" value="modifier" onclick="updatepage('.$val['id_champ'].')"></td></tr>';
	}
echo '</table>';
?>

Quand dans la première, je clique sur le bouton modifier du tableau du div, j'ai mon formulaire qui s'affiche en double donc déjà pas top et en plus quand je fais des modifications, ca ne les prends pas en compte, je commence à desespérer serieusement. Je ne sais pas quoi faire.

Merci par avance de votre aide

[AJAX] Gérer un tableau dynamique

AJAX

Vue hybride

Discussions similaires

Partager

Partager