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

Version imprimable

Voir 40 message(s) de cette discussion en une page

16/09/2011, 13h47
SpaceFrog

Citation:

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

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

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

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'); 
?>

16/09/2011, 14h01
artenis

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
16/09/2011, 14h05
SpaceFrog

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

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:

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:

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

16/09/2011, 14h16
SpaceFrog

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

il faudrait que je fasse ça ??

Code:

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/");
'; 
?>

16/09/2011, 15h00
SpaceFrog

:cry::cry::cry:

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
16/09/2011, 15h37
artenis

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

Code:

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

donc je tente le coup :

Code:

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);
 } 
 
?>

Code:

<?php echo $datapdf?>

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

16/09/2011, 16h09
SpaceFrog

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

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

Code:

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:

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

16/09/2011, 17h56
artenis
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:

1 2 3 4 5 $(document).ready(function(){ $.post('lectactivite.php', function(data) { $('#docpdf').html(data).delay(400); }); });
j'ai essayé ça:
Code:

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 ?

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

essaye ça
Code:

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

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

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 ?

17/09/2011, 20h21
SpaceFrog

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
18/09/2011, 15h46
artenis

j'ai eesayé ça :

Code:

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

avec ça:

Code:

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:

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

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

merci pour vos conseils
18/09/2011, 16h48
SpaceFrog

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

Ta première requete doit retourner le premier

Code:

LIMIT 1,1

la seconde, le deuxième

Code:

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:

for (elt in objJSON)

dans un setInterval ou setTimeout pour afficher les elements un par un
19/09/2011, 13h46
artenis

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:

for (elt in objJSON)

et surtout ou/comment l'inserer dans mon code

Voir 40 message(s) de cette discussion en une page