[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

**andry.aime** · 27/07/2011, 07h13

Bonjour

1-

2- La variable ident n'est pas déclarée dans la fonction update().

A+.

**Lydie12** · 27/07/2011, 09h58

Merci andry.aime
Pour le
1- c'est une modification de code qui finalement n'avait pas été complete et donc c'est juste une erreur de codage en fait le code des cases du tableau c'est :

Code :

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

<input type="text" name="travail" size="60" class='campos-form' id="travail" value="<?php echo $travail; ?>">

2- J'ai modifié ma fonction update() qui est devenue update(ident)

Code :

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

1
2
3
4
5
6
7
8
9
10
11
function update(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.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);
 
}

Mais j'ai toujours un probleme probleme de double affichage du tableau de saisie et donc quand je clique sur modifier, il prend en compte ce qu'il y a dans le tableau du haut et c'est pas top du tout... L'idéal serait que ca m'affiche un seul formulaire au lieu de me l'afficher en double.

**andry.aime** · 27/07/2011, 11h48

ça sert à quoi

?

**Lydie12** · 27/07/2011, 13h28

C'est le bouton qui me sert à faire l'update dans la base de données, alors que les boutons modifier des différentes lignes permettent eux de renvoyer les données dans le "formulaire" afin de pouvoir les modifier.

**andry.aime** · 27/07/2011, 13h39

Ok,

Dits nous, la page insert_line.php fait quoi? Il t'affiche un formulaire avec les données ? Si le formulaire que utilise pour faire la mise à jour est celui "test_ajax.php", tu dois mettre la table qui le contient dans le div que tu mets à jour.

A+.

**Lydie12** · 27/07/2011, 13h46

insert_line permet l'insertion dans la base de données et il m'affiche le tableau avec les nouvelles données inserés.
il ressemble à ca :
insert_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
20
<?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 ORDER BY id_champ");
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" value="supprimer" onclick="supprime('.$val['id_champ'].')"></td><td><input type="button" value="modifier" onclick="updatepage('.$val['id_champ'].')"></td></tr>';
}
echo '</table>';
?>

C'est pas la bonne page à appeler je pense...

Et oui le formulaire pour la mise à jour c'est celui qui est sur test_ajax.php puisque je ne veux pas créer plusieurs formulaires pour faire la mise à jour.

**andry.aime** · 27/07/2011, 13h50

Envoyé par andry.aime

Si le formulaire que utilise pour faire la mise à jour est celui "test_ajax.php", tu dois mettre la table qui le contient dans le div que tu mets à jour.

A+.

Met la table dans le div avec l'id=test_ajax.

A+.

**Lydie12** · 27/07/2011, 13h53

J'ai testé mais alors quand je clique sur ajouter, je perds le formulaire au dessus de mon tableau de données et quand je veux modifier, ma ligne est bien de retour completement là où il faut, mais mon tableau de données ne s'affiche plus en dessous.

**andry.aime** · 27/07/2011, 13h59

Tu n'as qu'à régénérer ton formulaire dans insert_line. C'est pas très joli mais vue la façon ton tu procèdes

. Je t'ai conseillé au début d'utiliser un formulaire que tu caches et l'affiche dans le cas du besoin et le remplir avec les données récupérées pour la mise à jour.

A+.

**Lydie12** · 27/07/2011, 14h02

J'ai pas réussi à utiliser le formulaire caché.
Je ne sais pas comment on fait, et si je dois ajouter un formulaire sur chacune de mes pages ca va pas etre joli/joli, et pas spécialement optimum non plus.

**andry.aime** · 27/07/2011, 14h07

Tu n'as pas cherché

. Et y en a d'autres discussions résolues.

**Lydie12** · 27/07/2011, 16h24

je viens d'essayer de le faire
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
49
50
51
52
53
54
55
56
57
<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'];
}
?>
<div id="ajout">	<table>
	<thead><th>Id</th>
	  <th>Contact</th>
		<th>Description</th>
		<th>Travail</th>
	</thead>
	<tr>
		<td>
		<input type="text" name="ident" id="ident" value="" READONLY></td><td>
		<INPUT type="text" size="40" name="contact" id="contact"  onFocus=""  value="" onBlur="" ></td>
		<td><input type="text" name="description" size="60" class='campos-form' id="description" value=""></td>
		<td><input type="text" name="travail" size="60" class='campos-form' id="travail" value=""></td>
	</tr>
</table>
 
<input type="button" value="Ajouter" onclick="submitpage();"/></div>
 
<div id="modifier" style="display:none;">	<table>
	<thead><th>Id</th>
	  <th>Contact</th>
		<th>Description</th>
		<th>Travail</th>
	</thead>
	<tr>
		<td>
		<input type="text" name="ident" id="ident" value="<?php echo $ident; ?>" READONLY></td><td>
		<INPUT type="text" size="40" name="contact" id="contact"  onFocus=""  value="<?php echo $contact; ?>" onBlur="" ></td>
		<td><input type="text" name="description" size="60" class='campos-form' id="description" value="<?php echo $description; ?>"></td>
		<td><input type="text" name="travail" size="60" class='campos-form' id="travail" value="<?php echo $travail; ?>"></td>
	</tr>
</table>
<input type="button" value="Modifier" onClick="update('<?php echo $ident; ?>')"></div>
<div id="test_ajax"></div>
</body>
</html>

Et donc quand je clique sur le modifier de mon tableau qui est dans le test_ajax (donc la fonction updatepage(ident))

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function updatepage(ident)
{
	var xhr = getXMLHttpRequest();
	xhr.onreadystatechange = function() {
		if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
			document.getElementById('test_ajax').innerHTML = xhr.responseText;
			document.getElementById('modifier').style.display='block';
		}
	};
 
	xhr.open("POST", "test_ajax.php", true);
	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	xhr.send("ident="+ident);
}

J'ai à l'écran mon formulaire d'ajout, mon formulaire de modification et encore mon formulaire d'ajout... Et je reviens au point de départ, c'est à dire les modifications ne sont pas prises en compte.

**andry.aime** · 27/07/2011, 16h37

Envoyé par Lydie12

J'ai à l'écran mon formulaire d'ajout, mon formulaire de modification et encore mon formulaire d'ajout... Et je reviens au point de départ, c'est à dire les modifications ne sont pas prises en compte.

Quand j'ai dit formulaire caché, c'est celui là que tu remplisse quand tu ferras l'update mais pas générer un nouveau. Abandonne cette idée si tu ne comprends pas.
Revient sur la solution de la génération du formulaire dans insert_inline.

A+.

**Lydie12** · 27/07/2011, 16h41

Quand tu disais formulaire caché, il faut bien que j'ai 2 fois le code de mon formulaire sinon le "caché" n'a pas lieu d'être.
Donc j'ai juste mis mon formulaire en 2 exemplaires sur ma page dans 2 div dont 1 que je masque et que je n'affiche que quand je clique sur Modifier dans mon div test_ajax.

[AJAX] Gérer un tableau dynamique

AJAX

Discussions similaires

Partager

Partager