Comment gérer l'affichage d'une reponse ajax dans un tableau de tableau(html)

Version imprimable

13/03/2012, 15h55
satanluimm

Comment gérer l'affichage d'une reponse ajax dans un tableau de tableau(html)

Bonjour,

Je viens vers vous après avoir passé un temps monumental à plancher sur ce problème pourtant si simple.

Je m'explique:
j'affiche un tableau où chaque ligne représente une station, les résultats de la requête qui renvoie ces résultats est paginée via zend_paginator, a partir de l'id de cette station, une requête AJAX me retourne les magasins associés à cette station.

Jusque la, tout vas pour le mieux, mais c'est là que les choses se corsent je ne sais absolument pas quoi faire de ce résultat.

Code:

{"results":{"list":{"name":"Esports Rossell","tel":"16 837 056","fax":"176 835 279","mail":"@andorra.ad","resortname":"La Massana","countryname":"Andorre"},"count":6}}

Comment insérer dans un tableau imbriqué sous la station les données que j'ai récupéré.

Je précise à nouveau:
je souhaite lorsqu'un utilisateur clique sur le lien dispo en bout de ligne, qu'une ou plusieurs ligne(s) soient insérées en dessus de celle-ci, laissant apparaitre les informations du ou des magasins retournés par par ma requête.

Je ne maitrise pas du tout la syntaxe du JS, et dès qu'il s'agît de chaîner plusieurs instructions je me perd presque instantanément^^
Pire quand il s'agît d'itérer sur un tableau.

Je précise (encore une chose):

je ne souhaite pas que l'on me mâche le travail, mais je ne vois même pas comment découper le problème en un algorithme simple ni même traiter les données sous forme d'objet que m'a retournée la requête AJAX.
Sans l'aide de vue disponible dans le framework zend, je peux même vous dire que je n'aurais certainement pas réussi à implémenter tout ce que j'ai déjà fait^^
Je ne m'y connais réellement pas bien en JS mais petit à petit j’apprends des petites choses.
C'est pourquoi tout ce que je vous demande se sont des conseils sur la marche à suivre pour arriver à mes fins:ccool:

Merci par avance pour vos réponses.

Cordialement
13/03/2012, 19h16
NoSmoking
Bonjour,
il existe les méthodes de l'objet JSON, quand existe, parse et stringify.

Dans ton cas tu doit utiliser JSON.parse pour convertir ta string en object.

Si JSON n'est pas supporté il te faut avoir recours à eval.
Code:

1 2 3 var jsonText = '{ "pays": "FRANCE", "ville": "LYON" }'; var jsonObjet = window.JSON ? window.JSON.parse(jsonText) : eval('(' + jsonText + ')'); alert( jsonObjet.ville);
14/03/2012, 16h46
satanluimm

Merci de ta réponse!

Pour tout dire j'ai crû qu'il s'agissait déjà d'un objet js vu que j'ai utilisé pour récupérer ce résultat la méthode $.ajax de jquery.

Je n'en ai pas encore eu le temps mais je vais me pencher sur ces méthodes.

Bonne journée

Bonjour, j'ai finalement réussi à trouver une solution à mon problème.
Je poste le code pour la postérité mais je sais qu'il ne profiteras pas forcément vu la qualité du code. ré utilisabilité zero...

Si d'ailleurs quelqu'un à des remarques à formuler qu'ils s'en donnent à cœur joie

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
 
<script type="text/javascript">
<!--//
 
 var iOpenShops  = false;
 var sStaticUrl  = '<?php echo $this->appUrl('static'); ?>'; 
 
   jQuery(function($){
 
		$("a[id^='lnk_']").click(function(){
			var iResort		= $(this).attr('id').replace('lnk_', "");
 
			if(iOpenShops != iResort && $("#table_"+iResort).hasClass('true')) {
				getShops(iResort);
			}
                        else{
				iOpenShops = null
			}
 
			if($("#table_"+iResort).hasClass("nodisplay")) {
				$("#table_"+iResort).removeClass("nodisplay");
				$("#table_"+iResort).removeClass("true");
				$("#lnk_"+iResort).children("img").attr("src", sStaticUrl+"admin/images/icons/arrow_in.png");
			}
                        else {
				$("#table_"+iResort).addClass("nodisplay");
				$("#lnk_"+iResort).children("img").attr("src", sStaticUrl+"admin/images/icons/arrow_out.png");
			}
 
			return false;
		});
	});
 
	function getShops(resort_id)
	{
		$.getJSON("/ajax/getshopsallinfos/resort_id/" + resort_id, function(data) {
			var aObj = (typeof data.results === "object") ? data.results : {};
			var items = []
			$.each(data, function() {	
				$.map(data.results, function(val) {
					items.push('<tr><td>' + val.id + '</td>');
					items.push('<td>' + val.name + '</td>');
					items.push('<td>' + val.tel + '</td>');
					items.push('<td>' + val.fax + '</td>');
					items.push('<td>' + val.mail + '</td>');
					items.push('<td>' + val.adr + '</td>');
					items.push('<td><a href="' + csvurl + '/shop_id/'+ val.id +'/shopname/'+ val.name +'" id="prices_' + val.id + '" class="greyRound"><img src="' + sStaticUrl + 'admin/images/icons/coins.png" class="Absm" alt="" />Prices</a></td></tr>');
				});
				var html = items.join("");
				$(html).appendTo('tbody#resort_'+ resort_id);
			});
		});
 
	}
	//-->
	</script>

Bonne journée