Problema associazione tabs/oggetto array

Discussione in 'jQuery' iniziata da fradamma, 31 Luglio 2013.

  1. fradamma

    fradamma Utente Attivo

    Registrato:
    28 Settembre 2012
    Messaggi:
    93
    Mi Piace Ricevuti:
    0
    Punteggio:
    0
    Ciao a tutti,
    velocemente vi espongo il mio problema: devo rendere dinamica una pagina web popolandola con dei dati che tirerò su da un file json (avevo pensato di farlo con jQuery con il metodo "$.ajax();"). Nello specifico il problema è che devo associare il tutto ad un menu a tabs (tutti i tab devono essere dinamici, niente html fisso e statico!). Ancor di più nello specifico:

    Avrò un JSON simile al seguente (dove per "altri dati" si intendono altre informazioni che verranno tirate su nella stessa tabella di riferimento):
    Codice:
    {
        "model": {
            "competizioni": [
                {
                    "competizioneId": 1,
                    "nome": "serieA",
                      altri dati......
                },
                {
                    "competizioneId": 2,
                    "nome": "serieB",
                      altri dati......
                },
                {
                    "competizioneId": 3,
                    "nome": "liga",
                      altri dati......
                },
                {
                    "competizioneId": 4,
                    "nome": "premier",
                      altri dati......
                }
            ]
        }
    }
    
    Avendo questo Json come è possibile associare la competizione 1 al primo tab del menu, la competizione 2 al tab 2, 3 3, 4 4 ecc... ??? Il tutto è in ordine di comparsa nel json (chi lo produce è un esterno non lo gestirò io quindi se ora c'è seriaA, domani potrebbe esserci premier e così via).
    Potete darmi una mano?
    Grazie anticipatamente!
     
    Ultima modifica di un moderatore: 1 Agosto 2013
  2. criric

    criric Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    21 Agosto 2010
    Messaggi:
    5.607
    Mi Piace Ricevuti:
    54
    Punteggio:
    48
    Sesso:
    Maschio
    Località:
    TN
    Ciao, per leggere il file json che hai postato puoi provare questo esempio
    HTML:
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script>
        $.getJSON("json.json",function(data){  
            $("#tabs").append("<ul>");
            $.each(data.model.competizioni, function(k,v){ 
                $("#tabs ul").append("<li onclick='alert(\"" + v.competizioneId + "\")'>" + v.nome + "</li>");
            })
            $("#tabs").append("</ul>");
        })
    </script>
    <div id="tabs"></div>
    
    da qui ad ottenere quello che vuoi dovrai lavorarci ancora un po ma puo essere un buon inizio
    buon lavoro
    sposto in jquery
     
    Ultima modifica: 1 Agosto 2013
  3. Longo8

    Longo8 Utente Attivo

    Registrato:
    28 Marzo 2011
    Messaggi:
    1.694
    Mi Piace Ricevuti:
    0
    Punteggio:
    36
    Non vorrei dire una cretinata ma lo dovresti fare dalla pagina che richiami con ajax ordinando i dati che vengono mandati alla pagina chiamante nel modo che ti è più comodo. Quindi per ordinarli devi farlo con php (se usi php) dalla pagina chiamata.
     
  4. fradamma

    fradamma Utente Attivo

    Registrato:
    28 Settembre 2012
    Messaggi:
    93
    Mi Piace Ricevuti:
    0
    Punteggio:
    0
    Grazie ragazzi, però ho ancora dei dubbi:

    x Ciric: lo script che mi hai postato tu è utilissimo grazie, però il mio problema è a monte. Ti spiego meglio: il json sarà sempre lo stesso (strutturalmente dico non per quanto riguarda i dati) ma io non posso creare dei tabs del menu statici perchè una settimana ce ne possono essere 8, la successiva 6 e così via...quindi devo riuscire a far "capire" alla funzione che il primo oggetto all'interno dell'array deve creare un tab posizionato al primo posto, un secondo al secondo ecc...anche perchè chi gestisce il json può decidere che una settimana ci sia al primo tab la serieB e non la serieA per esempio. Cmq allego un jpeg per farvi capire meglio...

    x Longo8: purtroppo la pagina che richiamo sarà sicuramente un .json (non ho facoltà di scelta in tal senso). Il tutto deve avvenire lato front-end.
     

    Files Allegati:

  5. criric

    criric Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    21 Agosto 2010
    Messaggi:
    5.607
    Mi Piace Ricevuti:
    54
    Punteggio:
    48
    Sesso:
    Maschio
    Località:
    TN
    a parte il div che contiene la lista non c'è altro di statico nello script che ti ho postato
    considerando che il tuo json sia cosi
    Codice:
    {
        "model": {
            "competizioni": [
            {
                "competizioneId": 1,
                "nome": "serieA",
                "partite": ["partita1","partita2","partita3"]
            },
            {
                "competizioneId": 2,
                "nome": "serieB",
                "partite": ["partita1","partita2","partita3","partita4"]
            },
            {
                "competizioneId": 3,
                "nome": "liga",
                "partite": ["partita1","partita2","partita3"]
            },
            {
                "competizioneId": 4,
                "nome": "premier",
                "partite": ["partita1","partita2"]
            }
            ]
        }
    }
    
    prova a far girare questo
    HTML:
    <style type="text/css">
        #tabs ul {
            margin:0;
            padding:0;
            list-style-type: none;
        }
        #partite {
            clear:both;
        }
        #tabs ul li {
            float: left;
            margin:0 8px;
        }
    </style>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script>
        $.getJSON("json.json",function(data){  
            $("#tabs").append("<ul>");
            $.each(data.model.competizioni, function(k,v){ 
                $("#tabs ul").append("<li onclick='stampaPartite(\"" + v.competizioneId + "\")'>" + v.nome + "</li>");
            })
            $("#tabs").append("</ul>");
        })
        function stampaPartite(competizione){
            $("#partite").html("");
            $.getJSON("json.json",function(data){  
                $.each(data.model.competizioni, function(k,v){ 
                    if(v.competizioneId == competizione) {
                        $.each(v.partite, function(x,y){
                            $("#partite").append("<p><a href='#'>" + y + "</a></p>");                        
                        })
                    }                
                })
            })
        }
    </script>
    <div id="tabs"></div><div id="partite"></div>
    
    è la prima cosa che mi è venuta in mente , si puo ottimizzare

    edit
    leggo ora che hai un'altro json ... cambia poco : fai la chiamata al secondo file passando sempre l'id competizione
     
    Ultima modifica: 1 Agosto 2013
  6. fradamma

    fradamma Utente Attivo

    Registrato:
    28 Settembre 2012
    Messaggi:
    93
    Mi Piace Ricevuti:
    0
    Punteggio:
    0
    Grazie!!!
    sono quasi arrivato al "dunque" grazie alla tua soluzione :D
    La prima chiamata $.getJson va bene ed i tab me li visualizza secondo l'ordine dell'array, l'unica cosa che non mi funziona è "stampaPartite", però modificandola nel modo seguente va bene:
    Codice:
    function stampaPartite(competizione){
    		   $("#partite").append("<ul>");
    		   $.getJSON("json.json",function(data){  
    		            $.each(data.model.competizioni, function(k,v){ 
    		               if(v.competizioneId == competizione) {
    		                  $.each(v.partite, function(x,y){
    		                        $("#partite").append("<li><a href='#'>" + y + "</a></li>");                        
    		                 })
    		             }                
    		        })
    		 })
     }
    
    In pratica creo due ul (uno per i tabs e il secondo per le partite) e li metto dentro <div id="tabs"></div> e <div id="partite"></div> però
    sai per caso spiegarmi perchè "$("#partite").html("");" non ha funzionato?
    Inoltre se posso chiederti delle spiegazioni più dettagliate (scusami sono rompente lo so :crying: )
    vedendo il seguente tuo codice:

    Codice:
     $.each(data.model.competizioni, function(k,v){ 
                $("#tabs ul").append("<li onclick='stampaPartite(\"" + v.competizioneId + "\")'>" + v.nome + "</li>");
     })
    
    vorrei capire un paio di cose ulteriori: ho capito che con un each cicli l'array (come se fosse un "for" in js) per arrivare al valore desiderato però perchè hai utilizzato il parametro "k" e secondo che significa nello specifico:
    "onclick='stampaPartite(\"" + v.competizioneId + "\")' "


    Grazie e scusate tutti per il disturbo!
     
  7. criric

    criric Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    21 Agosto 2010
    Messaggi:
    5.607
    Mi Piace Ricevuti:
    54
    Punteggio:
    48
    Sesso:
    Maschio
    Località:
    TN
    non ha funzionato in che senso? non ti ha cancellato il contenuto del div "partite"?
    k sta per chiave v per valore, come in un ciclo php foreach vengono estratti entrambi i parametri
    al click viene richiamata la funzione stampaPartite passandogli l'id della competizione come parametro
    nessun disturbo :fonzie:
     
  8. fradamma

    fradamma Utente Attivo

    Registrato:
    28 Settembre 2012
    Messaggi:
    93
    Mi Piace Ricevuti:
    0
    Punteggio:
    0
    In realtà "$("#partite").html("");" non dovrebbe servire (o forse mi sbaglio...) perchè non mi interessa cancellare il contenuto html del div partita (che inizialmente è vuoto). Anzi tuttalpiù dovrei trovare il modo di far visualizzare sempre il contenuto del primo tab al caricamento della pagina (sempre indipendentemente dai contenuti) e non al click sul primo tab. Tu come faresti?
     
  9. criric

    criric Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    21 Agosto 2010
    Messaggi:
    5.607
    Mi Piace Ricevuti:
    54
    Punteggio:
    48
    Sesso:
    Maschio
    Località:
    TN
    pui richiamare la funzione stampaPartite al caricamento della pagina passandole direttamente l'id del primo tab
    Codice:
    $(document).ready(function(){
                    stampaPartite(1);
                })
    Sei costretto a cancellare il contenuto ogni volta che richiami la funzione altrimenti le partite si accoderebbero a quelle del tab precedente
     
  10. fradamma

    fradamma Utente Attivo

    Registrato:
    28 Settembre 2012
    Messaggi:
    93
    Mi Piace Ricevuti:
    0
    Punteggio:
    0
    Ciao, il codice va tutto bene, gli unici "problema" rimasti sono due: il primo è il più banale, ossia il solito inconveniente che succede quando clicchi sul link del tab e la pagina sale su all'inizio come se ricaricasse. Di solito risolvo questo problema con il canonico "return false" alla fine dell'evento click, però in questo caso non funziona perchè non c'è un evento click su un'ancora. Come posso ovviare a questo?
    Il secondo problema è più complesso: associare l'id della singola partita stampata dalla funzione (è previsto oltre al nome della singola partita anche un id univoco per ogni partita identificato come un valore nell'oggetto) al caricamento di una seconda tabella con dati json presi da un'altro file. Come risolvereste?

    Grazie e buona serata

    Di seguito il codice:

    Codice:
    <script>
    
    	  $.getJSON("partite.json",function(data){  
    	        $("#tabs").append("<ul class='tabs'>");
    	        $.each(data.model.competizioni, function(k,v){ 
    	            $("#tabs ul").append("<li onclick='stampaPartite(\"" + v.competizioneId + "\")'>" +"<a href='#'>"+ v.nome + "</a>"+ "</li>");
    	        })
    	        $("#tabs").append("</ul>");
              })
    	
             function stampaPartite(competizione){
    		    	$("#partite").html("");
    		        $("#partite").append("<ul>");
    		        $.getJSON("partite.json",function(data){  
    	      	            $.each(data.model.competizioni, function(k,v){ 
    		                if(v.competizioneId == competizione) {
    		                    $.each(v.partite, function(x,y){
    		                        $("#partite").append("<li><a href='#'>" + y + "</a></li>");                        
    		                    })
    		                }                
    		        })
    		      })
    		      $("#partite").append("</ul>");
    	         }
    
    </script> 
    				 
    
     
  11. criric

    criric Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    21 Agosto 2010
    Messaggi:
    5.607
    Mi Piace Ricevuti:
    54
    Punteggio:
    48
    Sesso:
    Maschio
    Località:
    TN
    Per il primo problema hai due opzioni:
    1 : togli l'ancora
    2 : sposti l'onclick sull'ancora e metti return false
    il secondo non l'ho capito , me lo rileggo
     
  12. fradamma

    fradamma Utente Attivo

    Registrato:
    28 Settembre 2012
    Messaggi:
    93
    Mi Piace Ricevuti:
    0
    Punteggio:
    0
    Scritto così non funziona, semplicemente mi blocca il popolamento al primo tab e gli altri non me li fa vedere (non posso eliminare l ancora...)

    Codice:
     $.getJSON("partite.json",function(data){  
    	 $("#tabs").append("<ul class='tabs'>");
    	 $.each(data.model.competizioni, function(k,v){ 
    	   $("#tabs ul").append("<li>" +"<a href='#' onclick='stampaPartite(\"" + v.competizioneId + "\")'>"+ v.nome + "</a>"+ "</li>");
    	 return false
    	})
            $("#tabs").append("</ul>");
     									
    })
    
     
  13. criric

    criric Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    21 Agosto 2010
    Messaggi:
    5.607
    Mi Piace Ricevuti:
    54
    Punteggio:
    48
    Sesso:
    Maschio
    Località:
    TN
    hai sbagliato sintassi, scrivi cosi
    Codice:
    $.each(data.model.competizioni, function(k,v){ 
                $("#tabs ul").append("<li><a href='#' onclick='stampaPartite(\"" + v.competizioneId + "\");return false'>" + v.nome + "</a></li>");
            })
    
     
  14. fradamma

    fradamma Utente Attivo

    Registrato:
    28 Settembre 2012
    Messaggi:
    93
    Mi Piace Ricevuti:
    0
    Punteggio:
    0
    ook...sei un grande, era proprio quello il problema!
    Ora però mi sto cervellando per capire come fare la seconda cosa, la più complessa: al click sul link della singola partita devo finire su un'altra pagina dove saranno caricati altri dati json (esempio i giocatori delle rispettive squadre...) relativi a quella singola partita e provenienti da un altro file .json. La pagina è sempre la stessa, cambierà soltanto la tabella all'interno della pagina...
    Credo cmq che in entrambi i file ci sarà un id univoco per ogni partita, ma sicuramente la struttura dei due json divergerà
    Detto così è tanto incasinata la faccenda...ed effettivamente credo che lo sia... :cool:
     
  15. criric

    criric Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    21 Agosto 2010
    Messaggi:
    5.607
    Mi Piace Ricevuti:
    54
    Punteggio:
    48
    Sesso:
    Maschio
    Località:
    TN
    No, è semplice: fai una specie di copia della funzione stampaPartite() e la chiami stampaGiocatori()
    tra un attimo devo chiudere se non riesci in serata vedo di postarti un esempio
     
  16. fradamma

    fradamma Utente Attivo

    Registrato:
    28 Settembre 2012
    Messaggi:
    93
    Mi Piace Ricevuti:
    0
    Punteggio:
    0
    ok grazie....provo a vedere cosa combino, cmq a prescindere da cosa riesca a fare mi interesserebbe vedere un tuo esempio, vorrei confrontarmi con uno più esperto di me! :)
    Grazie mille!
     
  17. fradamma

    fradamma Utente Attivo

    Registrato:
    28 Settembre 2012
    Messaggi:
    93
    Mi Piace Ricevuti:
    0
    Punteggio:
    0
    Niente....non ci sono proprio riuscito...il problema è proprio alla base: non so come riuscire a collegare due pagine diverse, due id (seppur uguali) di due json diversi... :( HELP!

    PS spero abbia(te) passato delle belle vacanze ;)
     
  18. criric

    criric Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    21 Agosto 2010
    Messaggi:
    5.607
    Mi Piace Ricevuti:
    54
    Punteggio:
    48
    Sesso:
    Maschio
    Località:
    TN
    prova a postare quello che hai scritto magari è solo un problema di sintassi
    posta anche la struttura del secondo json
     
Sto caricando...

Condividi questa Pagina