recuperer les valeurs d'une base de données et les afficher dans une div avec ajax jquery

**SpaceFrog** · 16/09/2011, 13h47

Donc apparemment le principe d'afficher une page php dans une autre grâce à Ajax (sans rechargement de la page) n'est pas le même que de récupérer des données d'une BDD mysql et de les afficher , est ce vrai ?

Heu ben tout depend du point de départ ...

Si tu es sur le serveur ... pourquoi attendre d'aller chez le client pour envoyer une requete ajax poru lancer une requete mysql ???

par contre une fois chez le client pour interroger une table sans recharger la page il faut passe par ajax ..

Expose nous plutot ton besoin ...

**artenis** · 16/09/2011, 13h51

Voici donc mon include: (qui renvoie vers la page de connexion à la BDD)

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
<script type="text/javascript" src="jquery.js"></script>
<script>
	$(document).ready(function(){
		$.post('lectBDD.php', function(data) {
			$('#docpdf').html(data);
		});
	});
</script>
 
</head>
<?php include 'lectBDD.php'; ?>
<body>
 
	<table cellspacing="0" cellpadding="0" width="100%">
    <?php while($data = mysql_fetch_object($req)){ ?>
          <tr><td id="selector">
          <div id="docpdf" class="separtdoc"><?php echo htmlentities($data->gdoc); ?> </div> <div id="cadrelogo" class="separtdoc"> <img src="images/bt_pdf.png"/> </div>
          </td></tr>
    </table>
 <?php } ?>
</body>
</html>

Maintenant que j'ai inserer un include à quoi me sert mon $.post (puisque si j'ai bien compris la première valeur correspond à la page de connexion à la bDD )

Si j'ai bien compris la fin de votre derniere réponse, il faudrait que j'insere mon code ajax dans la page de connexion à la BDD (lectBDD.php) et que le premier paramètre de $.post renvoie vers la page principale , est-ce ça ??

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
<script type="text/javascript" src="jquery.js"></script>
<script>
	$(document).ready(function(){
		$.post('essai-Ajax_mysql.php', function(data) {
			$('#docpdf').html(data);
		});
	});
</script>
<?php
mysql_connect("localhost","root","");
mysql_select_db("ajout");
$sql = "SELECT * FROM `save` WHERE `theme` LIKE '3'";
$req = mysql_query($sql) or die('erreur de connexion'.mysql_error()); 
mysql_set_charset('utf8'); 
?>

**artenis** · 16/09/2011, 14h01

voici la situation:

j'ai un bouton qui permet d'afficher un formulaire d'ajout de document pdf,
à la fin de l'ajout les données sont envoyés à la base de données.

Sur la même page j'ai cinq cadres qui correspondent chacun à une catégorie
chacune d'elle récupère les noms des doc PDF et ce mettent à jour grâce à Ajax (après l'ajout d'un doc ,ainsi l'ajout et l'affichage du nouveau document ajouter se fait sur la même page )

je souhaite donc mettre en place un script ajax qui me permette de récupérer les données de la BDD.

merci

**SpaceFrog** · 16/09/2011, 14h05

si tu sasi faire une page php qui va chercher tes données et en fais un echo ...

pointes avec l'ajax sur cette page là ...

**artenis** · 16/09/2011, 14h13

Merci , mais n'est ce pas ce que j'ai fait depuis le début :

j'ai une page principale php avec:
- un script ajax qui récupère la page lectBDD.php (connexion à la BDD)
- un code html qui affiche mes cadres et récupère dans un div les données reçu par le script ajax ::

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
<script type="text/javascript" src="jquery.js"></script>
<script>
	$(document).ready(function(){
		$.post('lectBDD.php', function(data) {
			$('#docpdf').html(data);
		});
	});
</script>
 
</head>
<body>
 
	<table cellspacing="0" cellpadding="0" width="100%">
          <tr><td id="selector">
          <div id="docpdf" class="separtdoc"> </div> <div id="cadrelogo" class="separtdoc"> <img src="images/bt_pdf.png"/> </div>
          </td></tr>
    </table>
 
</body>
</html>

une page secondaire lectBDD.php

Code :

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

1
2
3
4
5
6
7
<?php
mysql_connect("localhost","root","");
mysql_select_db("ajout");
$sql = "SELECT * FROM `save` WHERE `theme` LIKE '3'";
$req = mysql_query($sql) or die('erreur de connexion'.mysql_error()); 
mysql_set_charset('utf8'); 
?>

n'est ce pas cela ??? que vous me dites

**SpaceFrog** · 16/09/2011, 14h16

mais ta page secondaire ne fait pas d'echo ... tu ne risques pas de recupérer quoi que ce soit

**artenis** · 16/09/2011, 14h49

il faudrait que je fasse ça ??

Code :

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

1
2
3
4
5
6
7
8
9
<?php
echo '
mysql_connect("localhost","root","");
mysql_select_db("ajout");
$sql = "SELECT * FROM `save` WHERE `theme` LIKE /"3/"";
$req = mysql_query($sql) or die(/"erreur de connexion/".mysql_error()); 
mysql_set_charset(/"utf8/");
'; 
?>

**SpaceFrog** · 16/09/2011, 15h00

noooooooooooooooooon

ta page php doit retourner le code html !!!

donc tu boucles sur ton resulat de requete poru rediger avec php le code html que tu veux avoir en retour

**artenis** · 16/09/2011, 15h37

je suis vraiment désolé mais je ne visualise pas ce que vous tentez de me faire comprendre

**SpaceFrog** · 16/09/2011, 15h52

Code :

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

1
2
3
4
5
6
7
8
9
10
<?php
mysql_connect("localhost","root","");
mysql_select_db("ajout");
$sql = "SELECT * FROM `save` WHERE `theme` LIKE '3'";
$req = mysql_query($sql) or die('erreur de connexion'.mysql_error()); 
mysql_set_charset('utf8'); 
//ici si tu ne fais pas d'echo ...
// ta page ph ne retournera rien !!!!!
// il manque la boucle while sur le resultat de requête
?>

**artenis** · 16/09/2011, 16h03

donc je tente le coup :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<?php
mysql_connect("localhost","root","");
mysql_select_db("ajout");
$sql = "SELECT * FROM `save` WHERE `theme` LIKE '3'";
$req = mysql_query($sql) or die('erreur de connexion'.mysql_error()); 
mysql_set_charset('utf8'); 
while($data = mysql_fetch_object($req)){ 
    $datapdf = htmlentities($data->gdoc);
 } 
 
?>

et

Code :

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

<?php echo $datapdf?>

mais ne devrais je pas le mettre dans la page d'affichage des données ?

**SpaceFrog** · 16/09/2011, 16h09

ton echo va etre retransmis en retour dans le data de ton callback d'ajax

**artenis** · 16/09/2011, 17h36

voici le resultat qui recupere bien les données de la BDD avec ajax:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<?php
mysql_connect("localhost","root","");
mysql_select_db("ajout");
$sql = "SELECT * FROM `save` WHERE `theme` LIKE '3'";
$req = mysql_query($sql) or die('erreur de connexion'.mysql_error()); 
mysql_set_charset('utf8'); 
while($data = mysql_fetch_object($req)){ ?>
 
	<tr><td id="selector">
    <div id="docpdf" class="separtdoc"><?php echo htmlentities($data->gdoc); ?></div> <div id="cadrelogo" class="separtdoc"> <img src="images/bt_pdf.png"/> </div>
    </td></tr>
<?php } ?>

et la page principale:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
<script type="text/javascript" src="jquery.js"></script>
<script>
	$(document).ready(function(){
		$.post('lectBDD.php', function(data) {
			$('#docpdf').html(data).setTimeout(400);;
		});
	});
</script>
 
</head>
<body>
 
          <div id="docpdf" class="separtdoc"></div> <div id="cadrelogo" class="separtdoc"> <img src="images/bt_pdf.png"/> </div>
 
</body>
</html>

Sauriez vous pourquoi j'ai une image en trop: pour le requette avec WHERE je suis censé obtenir trois résultats et j'obtiens 4 images , une idée sur ce probleme

en tout cas en grand merci pour vos conseils et votre patience

**artenis** · 16/09/2011, 17h56

une dernière question d'ordre de style:

comment faire apparaître l'un après l'autre les noms des documents avec un delai de 400 ms,

j'ai essayé ça:

Code :

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

1
2
3
4
5
$(document).ready(function(){
		$.post('lectactivite.php', function(data) {
			$('#docpdf').html(data).delay(400);
});
		});

j'ai essayé ça:

Code :

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

1
2
3
4
5
$(document).ready(function(){
		$.post('lectactivite.php', function(data) {
			$('#docpdf').html(data).setTimeout(400);
});
		});

mais ça ne marche pas , est ce possible ?? , il s'agit sans doute de sa position dans le script qui n'est pas bon ?

**SpaceFrog** · 16/09/2011, 19h44

400 milliseconde ? pour rafraichir le div ... c'est pas un peu court ?

essaye ça

Code :

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

1
2
3
4
5
$(document).ready(function(){
	var run=setInterval($.post('lectactivite.php', function(data) {
			$('#docpdf').html(data)
});1000);
		});

**artenis** · 16/09/2011, 21h30

Même avec ça, ça ne marche pas :

Code :

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

1
2
3
4
5
$(document).ready(function(){
 
	setInterval ( "maj()", 900 );
	function maj(){ $.post('lectBDD.php', function(data) {$('#docpdf').html(data);})}
});

y a t-il un moyen ou je laisse tomber le style d'affichage ??

Au fait le var run renvoie a quoi ?

**SpaceFrog** · 17/09/2011, 20h21

Haaaaaa je viens de comprendre ... tu veux afficher un par un les enregistrements ... ?

Deux possibilités:

Soit tu fais le setInterval sur le $.post, mais il faudra passer un LIMIT dans la requete de sorte que la page php ne retourne qu'un enregistrement à la fois.

Soit tu recupères en une seules fois tous les enregistrements avec un seul post, mais dans le callback tu lances un setInterval pour afficher un a un les enregistrements

**artenis** · 18/09/2011, 15h46

j'ai eesayé ça :

Code :

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

$sql = "SELECT * FROM `save` WHERE `theme` LIKE '3' LIMIT 0,1";

avec ça:

Code :

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

setInterval("$.post('lectBDD.php', function(data) {$('#docpdf').html(data);});",900);

le principe fonctionne , mais ce que je cherche a faire ( si ça existe) c'est de faire un limit sans connaitre le nombre de valeur dans le champ gdoc (les documents récupérés) de la table

je viens a nouveau d'essayer ça:

Code :

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

$sql = "SELECT * FROM `save` WHERE `theme` LIKE '3' LIMIT 0,50";

Mais ça m'affiche tout en une seule fois(pas de delai)

j'ai aussi essayé ça:

Code :

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

$sql = "SELECT * FROM `save` WHERE `theme` LIKE '3' LIMIT ?";

merci pour vos conseils

**SpaceFrog** · 18/09/2011, 16h48

Les paramètres de LIMIT sont : enregistrement de départ, nombre d'enregistrments.

Ta première requete doit retourner le premier

Code :

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

LIMIT 1,1

la seconde, le deuxième

Code :

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

LIMIT 2,1

...

Personnellement je ne farais qu'une requete pour ne faire qu'un seul ajax
mais au lieu de retourner le code HTML je retournerais un objet json avec le code html pour chaque enregistrement.
Une fois de retour coté client une boucle

Code :

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

for (elt in objJSON)

dans un setInterval ou setTimeout pour afficher les elements un par un

**artenis** · 19/09/2011, 13h46

merci pour cette proposition, mais existe t-il un cours sur le json car j'ai cherché dans les livres dans la section javasccript et n'ai pas trouvé de référence.

je ne comprends absolument pas ce que fait cette ligne:

Code :

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