Click et renseignement sur $.each

Version imprimable

Bonjour,

Je cherche à faire un programme qui affiche les noms d'une même famille en passant l'id du personnage principal à une base mysql.

Je procède pour le moment par étape successive afin de tester chaque partie indépendamment.
Pour le moment je teste l'affichage d'un json qui doit revenir d'une page php lisant ma base mysql.
Je le teste, pour le moment, directement comme chaine json dans mon jquery avec var details =
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 <!DOCTYPE html> <html lang="fr"> <head> <title>Titre accueil du site</title> <meta charset="utf-8" /> </head> <body> <div class='div_test'> <span>click</span> <div class='div_json'></div> </div> <script type="text/javascript" src="/JsQuery/jquery_dev/jquery-v1.9.1.js"></script> <script> $(function() { $('.div_test span').click(function() { alert("passe click); var details = '{"id":"123","nom":"DUPONT","prenom":"Jacques"}'; var html = ""; html += "<p>id du nom : "+details.id+"</p>"; html += "Nom : "+details.nom+"<br>"; html += "Nom : "+details.prenom+"<br>"; $(".div_json").html(html); }); </script> </body></html>
Le premier problème que je rencontre est que je ne vais pas dans script jquery, quand je clique sur la chaine "click" du span, je n'affiche pas mon alert();

Pourquoi ?? quelle est mon erreur ?

Pour l'affichage d'un nom

Code:

{"id":"123","nom":"DUPONT","prenom":"Jacques"}

je suis sûr de mon code mais lorsque j'aurais plusieurs noms, par exemple

Code:

[{"id":"123"},{"nom":"DUPONT"},{"prenom":"Jacques"},"id":"456"},"nom":"DUPONT"},{"prenom":"Michel"}] ...

comment les faire afficher à la suite ?? car je n'ai pas très bien compris comment fonctionner le $.each

Merci de vos réponses

04/04/2013, 15h19
boboss123

Salut,

Citation:

Envoyé par theo17

Pourquoi ?? quelle est mon erreur ?

Il n'y a rien qui te choque sur la coloration syntaxique de ton code ;) ?

Sinon, en général pour un élément cliquable, on utilise plutôt les balises <a> ou <button>
04/04/2013, 15h24
theo17

Oui j'ai oublié le " à la fin de alert("passe click);
mais çà ne change rien, mon alert ne s'affiche toujours pas quand je clique sur la chaine "click" du span.
Merci

ta closure est mal déclarée :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
(function(){
	$('.div_test span').click(function(){
		alert("passe click");
		//*
		var details = '{"id":"123","nom":"DUPONT","prenom":"Jacques"}';
		var html = "";
		html += "<p>id du nom : "+details.id+"</p>";
		html += "Nom : "+details.nom+"<br>";
		html += "Nom : "+details.prenom+"<br>";
		$(".div_json").html(html);
		// */
	});
})();

Mais vaut mieux faire ça (attendre que le DOM soit chargé) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
$(document).ready(function() {
	$('.div_test span').click(function(){
		alert("passe click");
		//*
		var details = '{"id":"123","nom":"DUPONT","prenom":"Jacques"}';
		var html = "";
		html += "<p>id du nom : "+details.id+"</p>";
		html += "Nom : "+details.nom+"<br>";
		html += "Nom : "+details.prenom+"<br>";
		$(".div_json").html(html);
		// */
	});
})();

04/04/2013, 15h59
theo17

Je pensais que $(function() suffisait et que cela remplaçait $(document).ready(function()
Mais bon avec ce code, çà marche, merci.

Mais l'affichage de mon html se passe mal, l'id, le nom et le prénom m'affichent undefined, alors que ma chaine json comporte bien leur valeur ?
Pourquoi ?
Merci.
04/04/2013, 16h09
theo17

Si je sais pourquoi, Je pense qu'il s'affiche mal parce que rien n'est indiqué que cette chaine est du json. J'avais fait l'essai avec un appel avec ajax vers un script php qui me renvoyait cette chaine avec un echo et là çà marchait bien.

J'ai voulu simplifier pour des tests, mais çà ne marche pas tout seul.

Mais ma question est surtout de savoir comment on se sert de la boucle $.each pour récupérer plusieurs lignes d'un json comportant plusieurs noms car je n'ai pas très bien compris son fonctionnement.

Tous les exemples se basent sur un seul élément (par ex une seule fois id, nom, prenom) et je veux plusieurs id, nom, prenom.

Comment puis je faire afficher plusieurs noms ?
Merci
04/04/2013, 16h28
Bovino

Citation:

Envoyé par theo17

Je pensais que $(function() suffisait et que cela remplaçait $(document).ready(function()

Oui, les deux notations sont similaires et la première est recommandée.

Citation:

Envoyé par theo17

l'id, le nom et le prénom m'affichent undefined, alors que ma chaine json comporte bien leur valeur ?

C'est normal,

Code:

var details = '{"id":"123","nom":"DUPONT","prenom":"Jacques"}';

details est une chaine et ne possède donc pas les propriétés que tu essayes d'afficher...

Code:

var details = {"id":"123","nom":"DUPONT","prenom":"Jacques"};

passera mieux...
04/04/2013, 16h50
theo17
Je n'aurais jamais pensé, et encore moins trouvé, qu'une variable pouvait accepter cette description sans qu'elle soit entre guillemet !! merci de ce renseignement.

Mais je reviens encore à ma question, comment faire afficher plusieurs noms avec $.each ?? comme
Code:

1 2 3 4 var details = {"id":"123","nom":"DUPONT","prenom":"Jacques"}, {"id":"456","nom":"DUPONT","prenom":"Michel"}; $.each(details, function (i,item) { alert(i+' '+item) // ou item.nom, ... });
Est ce correct ?
Comment savoir quand on change de ligne, donc de nom ?
Merci.
04/04/2013, 16h56
boboss123

Citation:

Envoyé par Bovino

Oui, les deux notations sont similaires et la première est recommandée.

Perso je préfère la seconde methode car au moins il y a le mots clef ".ready" sur lequel on peut faire des recherche en cas de doute de l'utilisation de la fonction.
=> Sur le site de jQuery, ce n'est pas marqué que la première methode est conseillée par rapport à la seconde (quelle est ta source ?) :
http://api.jquery.com/ready/
04/04/2013, 17h11
theo17
Ma source est le livre de Michel Martin (simplifiez vos développements javascript avec jquery) page 22 :

Extraits :
vous devez attendre que l'arbre soit complet. En jQuery, cela se traduit par le code suivant :
Code:

1 2 3 jQuery(document).ready(function() { // Ici, le DOM est entièrement défini });
Cette écriture peut se simplifier en remplaçant jQuery par son alias, $, ce qui donne :
Code:

1 2 3 $(document).ready(function() { // Ici, le DOM est entièrement défini });
Enfin, (document).ready peut être omis pour arriver au code suivant :
Code:

1 2 3 $(function() { // Ici, le DOM est entièrement défini });
Ces trois instructions sont strictement équivalentes. En ce qui me concerne, j'utiliserai systématiquement la troisième tout au long de ce cours, car c'est la plus courte et la plus simple à écrire.
Fin extrait.

Voilà pourquoi je n'ai mis que simplement $(function(), mais j'ai vu que cela ne marchait pas tout le temps !!

Toujours ma question sur les lignes multiples de json ??
Merci
04/04/2013, 17h16
Bovino
Fait un tableau contenant tes objets

Code:

var details = [{"id":"123","nom":"DUPONT","prenom":"Jacques"}, {"id":"456","nom":"DUPONT","prenom":"Michel"}];

puis parcours ce tableau :
Code:

1 2 3 $.each(details, function(i, elem){ console.log(elem.id, elem.nom, elem.prenom); });
04/04/2013, 17h29
theo17

Je viens de tester, il ne s'affiche rien, alors j'ai remplacé console.log par un alert(elem.id, elem.nom, elem.prenom)
et là il ne s'affiche que les 2 premiers id, 123 et 456, c'est tout, pas de nom ni de prenom et pas le dernier id.
Merci
04/04/2013, 17h47
Bovino

C'est dans la console qu'il faut regarder ce que donne mon code...
Quant à alert(), il ne prend qu'un seul paramètre, les autres sont juste ignorés.
04/04/2013, 17h59
theo17

J'ai été sur firebug pour afficher les résultats sur la console, je n'ai rien, à part l'erreur TypeError: $(...).ready(...) is not a function ???
Merci
04/04/2013, 18h04
theo17

En relançant le programme j'ai bien dans la console Fifefox

123 DUPONT Jacques
456 DUPONT Michel

sur les 2 lignes
Donc il faut remplacer console par une affectation html ?
Merci.

Voilà le test avec html :
Code:

1 2 3 4 5 6 var html = ""; var details = [{"id":"123","nom":"DUPONT","prenom":"Jacques"}, {"id":"456","nom":"DUPONT","prenom":"Michel"}]; $.each(details, function(i, element){ html += "id nom : "+element.id+", nom : "+element.nom+", prenom : "+element.prenom+"<br>"; }); $(".div_json").html(html);
et voilà l'affichage :
id nom : 123, nom : DUPONT, prenom : Jacques
id nom : 456, nom : DUPONT, prenom : Michel

donc çà marche, merci beaucoup

05/04/2013, 08h50
theo17
Bonjour,

J'ai un problème sur les tableaux avec json :

J'ai un tableau associatif comprenant un id, un nom et un prénom que je déclare

Code:

$details = array();

Pour rajouter un élément, si je fais
Code:

1 2 3 4 5 6 $details['id'] = "123"; $details['nom'] = "nom 1"; $details['prenom'] = "prenom 1"; $details['id'] = "456"; $details['nom'] = "nom 2"; $details['prenom'] = "prenom 2";
mais la dernière affectation remplace la première
alors si je fais
Code:

1 2 3 4 5 6 $details[]['id'] = "123"; $details[]['nom'] = "nom 1"; $details[]['prenom'] = "prenom 1"; $details[]['id'] = "456"; $details[]['nom'] = "nom 2"; $details[]['prenom'] = "prenom 2";
là je remplis bien mon tableau.

Mais là où le bas blesse, c'est que je veux transformer mon tableau en json.

J'emploie donc la fonction json_encode($details)

Mais seulement avec le tableau $details[]['id'] ... , cette fonction me retourne la chaine

Code:

[{"id":"123"},{"nom":"nom 1"},{"prenom":"prenom 1"},{"id":"456"},{"nom":"nom 2"},{"prenom":"prenom 2"}];

alors que je voudrais (ce que cela devrait faire avec $details['id'] = ...)

Code:

[{"id":"123","nom":"nom 1","prenom":"prenom 1"},{"id":"456","nom":"nom 2","prenom":"prenom 2"}];

qui serait conforme au tableau $details['id'] ...

Ces accolades supplémentaires sont dues à l'indice en plus $details[], mais si je ne fais pas comme çà pour ajouter, je remplace l'élément existant par le nouveau au lieu de l'ajouter.

Alors voilà ma question, comment remplir mon tableau en rajoutant des lignes afin d'obtenir cette chaine que comprendra json ??

(Note : ces éléments seront directement remplis par une boucle sur une table mysql.)
Merci

Tu construis mal ton tableau...
Il faut que pour chaque ensemble id, nom, prénom tu déclares un nouveau tableau :
Code:

1 2 3 4 5 6 7 8 9 $details = array(); $details[0] = array(); $details[0]['id'] = "123"; $details[0]['nom'] = "nom 1"; $details[0]['prenom'] = "prenom 1"; $details[1] = array(); $details[1]['id'] = "456"; $details[1]['nom'] = "nom 2"; $details[1]['prenom'] = "prenom 2";
Et donc, si tu le remplis avec une boucle (ce qui est préférable :aie:) tu dois prévoir un compteur dans cette boucle pour déterminer les indices.

05/04/2013, 09h15
boboss123
Citation:

Envoyé par theo17

Voilà pourquoi je n'ai mis que simplement $(function(), mais j'ai vu que cela ne marchait pas tout le temps !!

=> Tu parles de ta page web ? ... car ça devrait marcher : il suffit juste de rajouter à l'avant dernière ligne (tu n'as pas refermé ta fonction) :
Code:

1 2 });
05/04/2013, 11h16
theo17

Pour Bovino, en effet je ne construisais pas mon tableau comme il fallait, mais c'était cette manière de le construire qui me posait problème.
Là çà marche bien.

Pour boboss123 en effet je n'avais pas refermé la fonction, au temps pour moi.

Merci beaucoup à tous les deux de votre patience et gentillesse à l'égard d' un débutant.