[Salvatore C.Partecipante]

Salve, ho la necessità di recuperare dei dati in formato json e visualizzarli sotto forma di elenco, dove visualizzo solo una parte di un array, dopo di che una volta cliccato sopra visualizzare tutto il restante contenuto.

Io ho fatto in questo modo:

$.ajax({
	url: "http://sito.com/json.php",
	dataType: 'json',
	type: 'POST',
	cache: false,
	success: function(data){
		$.each(data, function(key, value){
			$('#result_cerca').append('<ul><li>Titolo:' + value.titolo+ '</li></ul>');
		});
	}
});

Riesco solo a visualizzare , l’elenco, ora vorrei che cliccando sul titolo, mi carica anche gli altri valori, data,descrizione, id_utente. Non so se ho reso l’idea. Potete aiutarmi?

Formato array;

[{
	"id": "54",
	"id_utente": "1",
	"data": "2014-06-20",
	"titolo": "Titolo 1",
	"descrizione": "Descrizione 1"
},
{
	"id": "25",
	"id_utente": "10",
	"data": "2014-06-20",
	"titolo": "Titolo 2",
	"descrizione": "Descrizione 2"
},
{
	"id": "3",
	"id_utente": "52",
	"data": "2014-06-22",
	"titolo": "Titolo 3",
	"descrizione": "Descrizione 3"
}]

Potete aiutarmi?

Grazie

[jqueryitaliaAmministratore]

Invece di recuperare il solo titolo, recupera tutti i valori nascondendoli.
Poi al click sul titolo li mostri. Come fare? Semplice:

$.ajax({
    url: "http://sito.com/json.php",
    dataType: 'json',
    type: 'POST',
    cache: false,
    success: function(data){
        $.each(data, function(key, value){

            $('#result_cerca').append('<ul class="dataContainer"><li class="title">Titolo:' + value.titolo + '</li><li class="otherData">ID: '+ value.id_utente + '<br />Data: '+ value.data + '<br />Descrizione:'+ value.descrizione + '</ul>');
        });
    }
});

$( '.dataContainer' ).on( 'click', '.title', function() {
   var myEl = $(this);
   myEl.siblings( '.otherData' ).toggle();
});

ovviamente, tramite CSS dovrai impostare:

.otherData {display:none;}

Buon lavoro!

[Salvatore C.Partecipante]

Ciao jqueryitalia, dopo gli impegni di lavoro e una breve pausa, ritorno sul progetto. La tua idea non è male, cosi studiando il tuo codice sono riuscito ad adattarlo, per il mio scopo. Ma mi capita una cosa strana, il toggle, non sempre funziona, capita che se premo sul elemento che scatena il click non succede nulla, oppure il div che dovrebbe visualizzarsi, compare per brevi secondi…Secondo te cosa sbaglio.? ti poso il codice che utilizzo.

function VisualizzaBox(){
   $("#apri-box").click(function(){
      $("#box_mese_ind").toggle("fast");
   });
}

Grazie.

[jqueryitaliaAmministratore]

Ciao Salvatore.

Gli id ‘#apri-box’ e ‘#box_mese_ind’ sono applicati a d un unico elemento, vero?

[Autore]

Post