Visualizzazione dei risultati da 1 a 9 su 9

Discussione: Click su un elemento di un'array

  1. #1

    Click su un elemento di un'array

    Buonasera a tutti,

    sono nuovo del forum e in ugual modo sono nuovo nel mondo di JavaScript. Sono uno studente al quinto anno di superiori che si ritrova a dover scrivere un codice per un sito web il quale richiede al server un file in formato JSON che viene codificato, e dal quale riesco a ricavarmi le informazioni che necessito, di un suddetto lavoro caricato in un server esterno. Il mio problema ora è: faccio richiesta al server del file, lo codifico e aggiungo gli elementi in un array che creo al momento nella funzione. Quello che devo fare adesso è: una volta mostrati i dati dell'array, fare in modo che un pezzo di stringa possa essere cliccato e che dopo il click io possa ricavarmi ulteriori due dati che non mostro all'utente ma che mi servono per la procedura seguente. Tutto questo perchè i due dati che devo ricavarmi mi servono come parametri per l'aggiunta di un commento dell'utente sul file inviato. Io inizialmente avevo pensato di effettuare un'ulteriore richiesta al server mostrando quei due dati "nascosti", costringendo l'utente a dover copiare ed incollare i due parametri in un'altra textbox; mi sembra davvero un insulto, nonostante sia alle primissime armi. Spero di essermi spiegato bene, vi ringrazio da subito per il vostro tempo.

    codice:
     function retrieveFiles(){
    	  var url = 'https://www.tissino.it/schoolworkuploader/index.php';
    	  var assignmentID = $("#textAssignmentID").val();
    	
    	$("#maincontent").html("retrieving files...") 
    	  $.getJSON(url, {
    	  r: "api/files",
    	  apikey: apikey,
    	  id: assignmentID,
    	}) 
    	 .done(function( data ) {
          console.log(data);
          $( "#maincontent" ).html("");	
    	 var files= [];	 
    	 var filesHash=[];
    	 if ($.isEmptyObject(data) == false){
    		 $.each( data, function(id,file) {		
    			 $("#maincontent").html("");
    			//filesHash.push("<li>" + id + "/" + file.hash + "</li>");		
    			//document.getElementById("abc").value = files.push("<li><a href='#commentTextID'>" + file.original_name + "</a></li>");
    			
    			files.push("<li>" + "<b>Nome file/ID:</b> " + "<b><p><a href='#commentTextID'>" + file.original_name + "</a> /" + id + ": " + "</b> consegnato il " + file.uploaded_at + "</p><b>Commento:</b> " + file.comment + "</li>");
    			//document.getElementById("abc").value = "<a href='" + file.original_name + "'</a>";			
    			});	//<p></p> = a capo
    	 }else{		 
    		 alert("Nothing uploaded for this assignment.");		
    	 }	 
    		
          $( "<p>", {
            html: "Files:",
          }).appendTo( "#maincontent" );
          
          $( "<ul/>", {
            html: filesHash.join("")
          }).appendTo( "#maincontent" );
          
          $("<ul/>",{
    		  html: files.join("")
    	  }).appendTo("#maincontent");
          
        })
        .fail(function() {
          console.log("error");      
          $( "#maincontent" ).html("Sorry, could not retrieve files.");
        });  
      }
      
      function addComment(){
    	  var url = 'https://www.tissino.it/schoolworkuploader/index.php';
    	  
    	   $.post( url + '?r=api/comment&apikey=' + apikey,
                { data: JSON.stringify( { id: 429, hash: "8947d4c36f7cbc36e8699530fb615867", comment: $("#commentTextID").val() + "." } )          
            })
            .done(function( data ) {
              console.log(data);                   
            })
            .fail(function() {
              console.log("Error");
             // alert("Sorry, could not append comment.");
            })
            ;   
      }
    i parametri che mi servono nella funzione "addComment()" sono: ID e Hash (che trovo nel file JSON che richiedo)

  2. #2
    Utente di HTML.it L'avatar di m4rko80
    Registrato dal
    Aug 2008
    residenza
    Milano
    Messaggi
    2,492
    Ciao, forse non si vede tutto nell'esempio ma mi pare di capire che viene caricata una pagina con un contenuto il quale può essere commentato. Si recupera il commento e va inserito con successiva chiamata all'ID del contenuto più hash(il contenuto contiene già questi due valori ricevuti dalla prima chiamata).

    Se si, puoi mettere una variabile (una o più o un object) come globale e valorizzare i valori dopo la prima chiamata e sull'addComment() andarli poi a leggere.

  3. #3
    Quote Originariamente inviata da m4rko80 Visualizza il messaggio
    Ciao, forse non si vede tutto nell'esempio ma mi pare di capire che viene caricata una pagina con un contenuto il quale può essere commentato. Si recupera il commento e va inserito con successiva chiamata all'ID del contenuto più hash(il contenuto contiene già questi due valori ricevuti dalla prima chiamata).

    Se si, puoi mettere una variabile (una o più o un object) come globale e valorizzare i valori dopo la prima chiamata e sull'addComment() andarli poi a leggere.

    Più o meno si. Praticamente succede che io ho una serie di esercizi assegnati da un prof che sono inseriti in un server esterno, i quali hanno rispettivamente un ID proprio. Io ora posso, sempre con una chiamata, recuperare questi esercizi (con file in formato JSON) e vederne l'ID. Questo ID qui può essere inserito (a mano) in una textbox e, cliccato un bottone, fare una nuova chiamata al server che mi ritorna in un file, sempre in formato JSON, la lista di tutti i lavori che ho consegnato per quell'esercizio. Quest'ultimo file contiene il nome del lavoro, la data di upload, l'id e l'hash (gli ultimi due non vorrei mostrarli). Io ora vorrei fare in modo che cliccato sul titolo del lavoro venga recuperato il suo rispettivo id e hash per poi riutilizzarli nell addComment().

    Io inizialmente avevo pensato di fare con variabili globali ma essendo ignorante nel linguaggio, non so per quale motivo, se dichiaro una "var hash;" all'inizio del tag <script> pare non funzionare, cosa sbaglio?

  4. #4
    Utente di HTML.it L'avatar di m4rko80
    Registrato dal
    Aug 2008
    residenza
    Milano
    Messaggi
    2,492
    Per farti un idea, se provi questo (salvalo come .html e provalo cosi' com'è)
    codice:
    <html>
    <head>
    	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript">
    
    
    
    
    var lavori;
    
    
    
    
    function recuperoLavori() {
      //recupero lavori da chiamata ajax, il risultato di data presa da done(data) sarà tipo:
        var data = [{
        	id: 1,
        	titolo: "lavoro 1",
        	data: "20180105",
        	hash: "555ggd3"
        },
         {
        	id: 2,
        	titolo: "lavoro 2",
        	data: "20180105",
        	hash: "4fs45s"
        }
        ];
    
    
        lavori = data; //assegno data a "lavori" globale
    
    
        jQuery.each(lavori,function(k,item){
        	jQuery('#lavori').append('<a href="#" data-id="'+item.id+'">'+item.titolo+'</a><br/>');
        })
    
    
    }
    
    
    jQuery(function(){
    	recuperoLavori();
    	jQuery('#lavori a').on('click', function(){
    		var ID = jQuery(this).data('id');
    		console.log('click id : ' + ID);
    
    
    	 var lavoro = jQuery.map( lavori, function( item, i ) {
    	      if(item.id==ID){
    	      	return item;
    	      }
    	});
         console.log(lavoro);
    	})
    
    
    });
    
    
    
    
    
    
    </script>
    </head>
    <body>
    <P>lista lavori</P>
    <div id="lavori">
    ...........
    </div>
    </body>
    <html>
    recuperoValori() sarà la tua chiamata al server per recuperare la lista iniziale.
    La lista lavori l'ho craeta di prova post richiesta (immagino sarà così anche la tua).
    Settato poi "lavori" come globale e al click su un link/lavoro generato recupero tutti i dati con match ID lavoro e item trovato nella lista lavori.

  5. #5
    Quote Originariamente inviata da m4rko80 Visualizza il messaggio
    Per farti un idea, se provi questo (salvalo come .html e provalo cosi' com'è)
    codice:
    <html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript">
    
    
    
    
    var lavori;
    
    
    
    
    function recuperoLavori() {
      //recupero lavori da chiamata ajax, il risultato di data presa da done(data) sarà tipo:
        var data = [{
            id: 1,
            titolo: "lavoro 1",
            data: "20180105",
            hash: "555ggd3"
        },
         {
            id: 2,
            titolo: "lavoro 2",
            data: "20180105",
            hash: "4fs45s"
        }
        ];
    
    
        lavori = data; //assegno data a "lavori" globale
    
    
        jQuery.each(lavori,function(k,item){
            jQuery('#lavori').append('<a href="#" data-id="'+item.id+'">'+item.titolo+'</a><br/>');
        })
    
    
    }
    
    
    jQuery(function(){
        recuperoLavori();
        jQuery('#lavori a').on('click', function(){
            var ID = jQuery(this).data('id');
            console.log('click id : ' + ID);
    
    
         var lavoro = jQuery.map( lavori, function( item, i ) {
              if(item.id==ID){
                  return item;
              }
        });
         console.log(lavoro);
        })
    
    
    });
    
    
    
    
    
    
    </script>
    </head>
    <body>
    <P>lista lavori</P>
    <div id="lavori">
    ...........
    </div>
    </body>
    <html>
    recuperoValori() sarà la tua chiamata al server per recuperare la lista iniziale.
    La lista lavori l'ho craeta di prova post richiesta (immagino sarà così anche la tua).
    Settato poi "lavori" come globale e al click su un link/lavoro generato recupero tutti i dati con match ID lavoro e item trovato nella lista lavori.
    Wow parto subito con il ringraziarti! Il tuo esempio pare tanto andare a concretizzare la mia idea, ora non mi resta che apprenderne la logica e applicarlo al mio codice.
    Ti ringrazio davvero tanto!

    Un'unica cosa, il tuo array "var data" corrisponderebbe al mio array "var files"?

  6. #6
    Utente di HTML.it L'avatar di m4rko80
    Registrato dal
    Aug 2008
    residenza
    Milano
    Messaggi
    2,492
    Il mio data (fake) sarabbe quello che ti ritorna dal done(data) quando vai a recuperare i dati dei vari lavori.
    L'ho formattato così presumendo un JSON con una lista di object e relative proprietà. Se diverso non lo so

  7. #7
    Quote Originariamente inviata da m4rko80 Visualizza il messaggio
    Il mio data (fake) sarabbe quello che ti ritorna dal done(data) quando vai a recuperare i dati dei vari lavori.
    L'ho formattato così presumendo un JSON con una lista di object e relative proprietà. Se diverso non lo so
    Sisi vedendo bene il codice lo avevo intuito, scusa. Ora però ti porgo un altro dilemma mio stupido.. Ho preso il tuo codice e l'ho rielaborato secondo i miei parametri ecc.. funziona fino ad un certo punto, ovvero quando clicco sul titolo non si genera l'evento "onclick", come mai? Scusa le domande sciocche

    codice:
    var lavori;
    var apikey = 'VSBFIROIGEHD';
    
    
      function retrieveFiles(){
    	  var url = 'https://www.tissino.it/schoolworkuploader/index.php';
    	
    	  $.getJSON(url, {
    	  r: "api/files",
    	  apikey: apikey,
    	  id: 374,  //id dell'esercizio per il quale ho inviato i file
    	}) 
    	 .done(function(data) {
          console.log(data); 
    	  lavori = data; 
    	  
    	jQuery.each(lavori,function(k,item){	
            jQuery('#lavori').append('<a href="#" data-id="'+k /*id nel JSON non c'è, è "implicito" e quindi uso k*/ +'">' //titolo +item.original_name+'</a><br/>');
    		})	              
        })
        .fail(function() {
          console.log("error");   
        });  
      }
    
    
    
    
    jQuery(function(){
        retrieveFiles();
        jQuery('#lavori a').on('click', function(){
            var ID = jQuery(this).data('id');
            console.log('click id : ' + ID);
    
    
    
    
         var lavoro = jQuery.map( lavori, function( item, i ) {
              if(item.id==ID){
                return item;
              }
        });
         console.log(lavoro);
        })
    });

  8. #8
    Utente di HTML.it L'avatar di m4rko80
    Registrato dal
    Aug 2008
    residenza
    Milano
    Messaggi
    2,492
    Ciao, se non hai i'id riferito al singolo "lavoro" devi trovare il modo di riconoscere lo stesso indice fra la liasta lavori e il "lavoro" cliccato.
    Dato che usi K preso dal ciclo, presumendo che la lista lavori creata con append() abbia lo stesso ordine della lista lavori, cliccando su un "lavoro" puoi recuperare l'indice cliccato. QUI un esempio di come poterlo utilizzare.
    Se la funzione di indice non ti conviene e convince, prima di assegnare "lavori" al risultato di done(data), potresti ciclare "data" aggiungendo prima un ID ad ogni elemento (quindi il "k" del caso) per poi usarlo successivamente come nel mio esempio. In questo modo non puoi sbagliare l'associazione.
    Se il click su ogni "lavoro" non funziona (non ho capito se non recuperi i dati per via dell'indice o se proprio non fa nulla) puoi sostituire la funnzione on()... scrivendola in quest'altro modo:
    codice:
    $( "#dataTable tbody" ).on( "click", "tr", function() {
    
      console.log( $( this ).text() );
    
    });
    come da esempio QUI, serve appunto per applicare la funzione ad elementi che inizialmente potrebbero non esistere nel DOM

  9. #9
    Scusate la lunga assenza prima della risposta. Il mio problema l'ho risolto, esattamente in questo modo:

    codice:
    $.each( data, function(id,file) {		
    			 $("#maincontent").html("");
    			var fileDetails = $("<p>").html("<b>Nome file:</b> " + "<a href='#commentTextID'>" + file.original_name + "</a><b> Consegnato il: </b>" + file.uploaded_at +
    			"<b> Commento: </b>" + file.comment).attr("data-id",  id).attr("data-hash", file["hash"]); 		     
    			 fileDetails.click(function(){
    				 $("#fileNameComment").html("");
    				 var details = $(this);
    				 idFileToComment = details.attr("data-id");
    				 hashFileToComment = details.attr("data-hash");				 
    				 $("#fileNameComment").append("Add comment for " + file.original_name);				 
    				 console.log(details.attr("data-hash"));
    				 });			
    			$("#filesField").append(fileDetails);					
    			});	
    	 }else{		 
    		 alert("Nothing uploaded for this assignment.");		
    	 }

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2018 vBulletin Solutions, Inc. All rights reserved.