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

19/09/2011, 14h03
SpaceFrog

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/

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:

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:

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

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)

19/09/2011, 15h14
SpaceFrog

pourquoi renvoyer du code html ??

et pas un objet json
avec

Code:

{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é
19/09/2011, 19h29
artenis

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

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:

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:

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:

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:

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()

19/09/2011, 20h56
artenis

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)
19/09/2011, 21h12
SpaceFrog
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:

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
19/09/2011, 23h31
artenis
d'accord,

mais(encore un mais)

pour ce code:
Code:

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,

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

ton fichier php:

Code:

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

20/09/2011, 09h32
Invité
salut,

juste pour info, on aurait simplement pu
Code:

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 :D), 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 :aie:, et c'est tout à l'honneur de spacefrog de t'avoir aidé jusque là!:aie:
20/09/2011, 09h42
SpaceFrog

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 .
20/09/2011, 13h36
artenis
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:

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

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

1 2 3 <tr><td id="selector"> <div id="docpdf" class="separtdoc"> </div> </td></tr>
il faudrait donc plus ou moins ça :
Code:

1 2 3 $codehtml = <tr><td id="selector"> <div id="docpdf" class="separtdoc"> </div> </td></tr>
20/09/2011, 13h59
SpaceFrog

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

Code:

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

=>

Citation:

{"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>" }
20/09/2011, 14h35
artenis

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

ou, dans le json dois je inserer l'equivalent de $data->gdoc
20/09/2011, 14h39
SpaceFrog

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

Code:

$enreg=0;

dans la boucle

Code:

++$enreg;

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

donc

Code:

"enreg'. (++$enreg)

=> enreg1, enreg2 ....
20/09/2011, 14h58
artenis

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

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

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

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:

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

20/09/2011, 15h56
SpaceFrog

je t'ai donné le principe de base ...
maintenant ce que tu veux mettre dans ton json ...
22/09/2011, 00h24
artenis

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

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