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

**SpaceFrog** · 19/09/2011, 14h03

ta page php doit juste faire un echo d'un string json
en precisant un datatype de la reponse ...

jette un oeil par là
http://nico-pyright.developpez.com/t...netajaxmethod/

**artenis** · 19/09/2011, 15h08

j'ai un serieux problème que je n'arrive pas a résoudre:

(je pense qu'il ne s'agit pas de javascript ) mais vu qu'il s'agit du même sujet j'en profite:

recapitulatif:

grace a toi spaceforg je peux enfin recuperer les données d'une BDD avec ajax jquery , cepandant les données recueillies sont situé dans un tableau et séparer par des "TR" "TD",

voila le probleme : logiquement chaque donnée est situé dans un TR TD avec l'id selector qui applique un "border-bottom" et un selector:hover , mais seul la première données reçoit le selector, toutes les autres sont démuni de selector

voici les codes:

lectBDD.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
<link rel="stylesheet" href="styleresult.css" />
<?php
mysql_connect("localhost","root","");
mysql_select_db("ajout");
$sql = "SELECT * FROM `save` ";
$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 } ?>

page_administration_style.php: partie AJAX

Code :

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

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

page_administration_style.php: HTML

Code :

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

1
2
3
4
5
6
7
<div class="docucat">
            	<table cellspacing="0" cellpadding="0" width="100%">
                	<tr><td id="selector">
                	<div id="docpdf" class="separtdoc"> </div>
                    </td></tr>
                </table>
            </div>

je ne pense pas que ça vienne du css ni du javascript (ajax) , mais si ça vient bien du php je ne sais vraiment pas d'ou vient le probleme

merci par avance pour votre aide (désolé s'il ne s'agit pas du bon forum)

**SpaceFrog** · 19/09/2011, 15h14

pourquoi renvoyer du code html ??

et pas un objet json
avec

Code :

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

{id1: [code html], id2:[codehtml] .... }

demande à ton php de rediger un string json sous cette forme..
il te sera plus facile ensuite coté client de recupérer le code html souhaité

si tu veux absolument avoir tout le html en bloc , du coup au lieu de paooser par post, tu peux passer par load qui te permet de charger uniquement une balise precise du block visé

**artenis** · 19/09/2011, 19h29

encore une fois , je ne comprends rien à ce code si court qui veut surement en dire un long discours,

comment instencie t-on JSON et a quoi font référence id1, id2 ainsi que le code html??

j'ai eu beau lire consciencieusement votre lien " Json" je n'arrive pas à piger

merci

**SpaceFrog** · 19/09/2011, 19h41

tu vois ce qu'est un Array en javascript ?
tu vois ce qu'eun un array littéral ?
Au lieu d'avoir des indexes numériques ils sont alphabétiques ...

Code :

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

1
2
3
4
 
var truc =new Array()
truc['machin'] = 'coucou
alert(truc['machin']

en gros un objet json est une sorte de tableae

Code :

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

1
2
3
4
5
 
var truc ={"machin":"coucou","bidule":"chouette"}
 
alert(truc.machin)
alert(truc.bidule')

imagine maintenant que tu fasses rédiger coté serveur par ton php un string json

Code :

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

1
2
3
 
{"enreg1": "ici le code html qui va bien pour le premier",
  "enreg2":" là le code html pour le second" }

etc ....

ensuite coté javascript tu recupères le string json que tu evalues ou que tu parses ou avec jquery tu le recupères direct au format json ..
tu n'as plus qu'a boucler dessus :

Code :

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

1
2
3
4
5
 
var mysjon={"enreg1": "ici le code html qui va bien pour le premier",
  "enreg2":" là le code html pour le second"}
for (elt in myjson){
 alert("l'indexe "+elt +" contient la valeur :" + myjson.elt )

ici dans l'exemple pour faire un alert ... dans ton code pour l'attribuer en html()

**artenis** · 19/09/2011, 20h56

formidable, merci pour cette explication,

Si j'ai bien compris , machin, bidule, enreg1 et enreg2 sont des éléments de ma base de données , n'est ce pas ??, et l'on y attribue à chacun un style (html/css) .

Seulement dans mon cas (sauf si je n'ai pas compris l'explication) je souhaite attribuer un même style à chaque données reçu et ne peux séléctionner un élément de ma table(BDD), puisque je ne connais pas le nombre de valeurs(nombre de documents) correspondant à une selection (WHERE id = activite)

**SpaceFrog** · 19/09/2011, 21h12

le style n'a rien a voir ...
il doit etre déja présent sur ta page ...

Imagine que la page que tu appelles avec ton ajax retourne un truc qui ressemble à ceci:

Code :

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

1
2
3
 
{"enreg1": "<div class=\"foo\"> du texte qui va bien pour le premier </div>",
  "enreg2":" <div class=\"foo\"> du texte qui va bien pour le second </div>" }

et que sur ta page mère tu aies déja un style pour foo ...
lorsque tu boucleras sur ton json pour mettre le code html recupéré là ou tu veux .. ben le css s'y appliquera tout automatiquement

**artenis** · 19/09/2011, 23h31

d'accord,

mais(encore un mais)

pour ce code:

Code :

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

1
2
3
var truc =new Array()
truc['machin'] = 'coucou
alert(truc['machin']

qui de machin et coucou récupèrent ce qu'il y a dans la base de données (j'ai bien compris le systeme de tableau et ne vois pas a quel moment on recupere les éléments de la base ou que l'on y fasse référence

de plus enreg1, 2 , 3, 4 etc, correspondent à des champs précis de la BDD, n'est ce pas ??????

Or lorsque l'administration du site, dont il est question, sera fini , je n'aurai aucun moyen de savoir à quel champ de ma BDD correspond mon "enreg", puisque la personne qui gera le site pourra ajouter et supprimer à volonter des documents dans la table de la BDD (il ne s'agit pas d'une BDD fixe ou l'on selectionne les éléments dont on a besoin,

encore une fois si je suis à coté de la plaque par rapport à vos explications, veuillez m'excusez,

**SpaceFrog** · 20/09/2011, 08h29

avec ta boucle while sur ton resultat de requete tu rédiges le string json

ton fichier 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
<?php
$stringjson='{';
$enreg=0;
mysql_connect("localhost","root","");
mysql_select_db("ajout");
$sql = "SELECT * FROM `save` ";
$req = mysql_query($sql) or die('erreur de connexion'.mysql_error()); 
mysql_set_charset('utf8'); 
while($data = mysql_fetch_object($req)){ 
$stringjson.='"'. ++$enreg.'":"'.$codehtml.'"';
}
 
$stringjson.='}';
echo $stringjson;
?>

attention le css se trouve sur la page mère !!

Invité · 20/09/2011, 09h32

salut,

juste pour info, on aurait simplement pu

Code :

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

1
2
3
4
while($data = mysql_fetch_object($req)){ 
 $json[data['enreg']]= $data['codehtml'];
}
echo json_encode($json);

mais j'imagine que c'est pour la compréhension qu'on a pas utilisé l'api.

ps : un enregistrement, comme son nom l'indique est un enregistrement. Pas un champs.
Un enregistrement peut être vu comme une ligne de la table, un champs comme une colonne.

Le json c'est qu'une manière de transmettre les informations qui proviennent de ta table.

ps2 : toujours tester. Au lieu de faire une requete dans la table (on tas dit que ca marche, donc ca va marcher

), tu fais un echo "LOL" côté serveur, et tu testes un affichage côté client. Puis tu mets une vieille syntaxe json et tu regardes si ca marche côté client, puis...
et tu décomposes en petits éléments. Ca t'évitera de nager dans le flou et tu comprendras au moins ce que tu manipules.

ps3 : je ne suis que de passage pour cette discussion

, et c'est tout à l'honneur de spacefrog de t'avoir aidé jusque là!

**SpaceFrog** · 20/09/2011, 09h42

J'expose pas à pas les bases du système pour une meilleur compréhension...
Le passage au json_encode ne se fera qu'une fois les bases acquises.

artenis, tu dois considérer ajax comme un coursier qui fait un aller retour vite fait sur le serveur pour aller recupérer des données..
en l'occurrence il est préférable de lui demander de te ramener un objet json.
A toi de t'arranger que ta page livre à ton coursier le string json adequat, soit en le redigeant intégralement, soit avec un json_encode.
Une fois revenu coté client ton coursier ajax te livre le strign json que tu peux alors exploiter avec javascript .

**artenis** · 20/09/2011, 13h36

un grand merci pour vos explications, surtout Spacefrog:

j'ai toujours un truc qui me gène, c'est $enreg:

s'il ne s'agit pas d'un champ de ma table (comme "gdoc"), à quel moment dans ce bout de script y fait -on référence ??

Code :

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

$stringjson.='"'. ++$enreg.'":"'.$codehtml.'"';

ensuite (je vais sans doute vous faire répéter), $codehtml: il s'agit bien de ça ?

Code :

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

1
2
3
<tr><td id="selector">
                	<div id="docpdf" class="separtdoc"> </div>
                    </td></tr>

il faudrait donc plus ou moins ça :

Code :

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

1
2
3
 $codehtml = <tr><td id="selector">
                	<div id="docpdf" class="separtdoc"> </div>
                    </td></tr>

**SpaceFrog** · 20/09/2011, 13h59

c'est une variable incrémentée pour générer ton objet json ...

Code :

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

$stringjson.='"enreg'. ++$enreg.'":"'.$codehtml.'"';

=>

{"enreg1": "<div class=\"foo\"> du texte qui va bien pour le premier </div>",
"enreg2":" <div class=\"foo\"> du texte qui va bien pour le second </div>" }

**artenis** · 20/09/2011, 14h35

d'accord, j'avais bien compris, mais que contient -elle ? $enreg

ou, dans le json dois je inserer l'equivalent de $data->gdoc

**SpaceFrog** · 20/09/2011, 14h39

tu n'as pas lu le code donné avant ??
initialisée à

Code :

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

$enreg=0;

dans la boucle

Code :

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

++$enreg;

vaut 1 pour la première occurrence de la boucle
2 pour la seconde ...

donc

Code :

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

"enreg'. (++$enreg)

=> enreg1, enreg2 ....

**artenis** · 20/09/2011, 14h58

ok désolé je crois que je mélange tout , bon j'ai compris la dernière explication, mais avez vous répondu à ça:

ou, dans le json dois je inserer l'equivalent de $data->gdoc

et si oui comment je sais que $enreg equivaut à gdoc puisqu'à aucun moment il n'est écrit dans le code ??

ne faut-il pas récupérer le nom d'un champ(gdoc) pour pouvoir récupérer ce qu'il contient (doc1.pdf,doc2.pdf, ...)

**SpaceFrog** · 20/09/2011, 15h17

un exemple à partir du moment ou tu récupères le json ...

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
<style type="text/css">
html, body {
      margin:0;
	padding:0;
	}
 
.foo {color:green;}
</style>
 
<script type="text/javascript">
$(function(){
var stringjson= '{"enreg1":"<div class=\\"foo\\"> enregistrement 1 </div>","enreg2":"<div class=\\"foo\\"> enregistrement 2 </div>","enreg3":"<div class=\\"foo\\"> enregistrement 3 </div>" }'
myjson=eval("("+stringjson+")")
 
$.each(myjson, function(item, value){
 	$('#toc').html( $("#toc").html()+value)
 
 	})
 
})
 
</script>
</head>
<body >
 
<div id="toc"> </div>
</body>
</html>

si tu recupères un string json il te faudra l'evaluer ou le parser (ici eval :red

sinon to post te permet de definir avec le datatype le type json direct en reponse

**artenis** · 20/09/2011, 15h53

donc la, le script précédent récupère en javascript les données json provenant de la page php que vous m'avez également fournit, mais une fois de plus dans ce scritp la:

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
<?php
$stringjson='{';
$enreg=0;
mysql_connect("localhost","root","");
mysql_select_db("ajout");
$sql = "SELECT * FROM `save` ";
$req = mysql_query($sql) or die('erreur de connexion'.mysql_error()); 
mysql_set_charset('utf8'); 
while($data = mysql_fetch_object($req)){ 
$stringjson.='"'. ++$enreg.'":"'.$codehtml.'"';
}
 
$stringjson.='}';
echo $stringjson;
?>

je ne vois toujours pas ou est ce que l'on recupère le "gdoc"(champ de ma table contenant les noms des documents.

sinon s'il n'y a pas besoin du gdoc pourriez vous m'expliquez quel variable récupère les noms des documents

**SpaceFrog** · 20/09/2011, 15h56

je t'ai donné le principe de base ...
maintenant ce que tu veux mettre dans ton json ...

**artenis** · 22/09/2011, 00h24

je vous remercie sincèrement pour toute votre aide, mais je ne vois pas du tout dans quel partie du code je peux appeller le champ "gdoc" de ma table, et le code json est trop compliqué pour moi a ce jour, et n'ai aucune référence pouvant m'aider à avancer (trouver ma réponse - un script ressemblant à ce qui pourrait m'être utile pour mon problème)

puisque dans le script que vous m'avez donné je ne vois absolument pas quel variable pourrait contenir mon appel au champ de ma table

et s'il faut que je créé cette variable je ne sais ou l'insérer dans le script que vous m'avez donné.

Le vrai problème est que je dois finir l'administration du site dans moins d'un mois et n'ai pas le temps de me consacré à un cours en ligne (encore une fois je vous remercie pour tout vos conseils et votre aide) je vais mettre ce post en résolu car le titre du post à effectivement été résolu

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

jQuery

Discussions similaires

Partager

Partager