Visualizzazione dei risultati da 1 a 3 su 3
  1. #1

    Popolare dinamicamente una Text area

    Salve a tutti sto lavorando ad un progetto , nello specifico dopo aver creato una lista sotto una text area ho bisogno che la text area sopra si popoli quando venga cliccata una voce della lista.
    la text area si dovrebbe popolare con un attributo di un un oggetto del mio codice js.

    qui il codice js


    codice:
    function caricaXML(nomeFile) {
       var xmlhttp;
       if (window.XMLHttpRequest) {
          // IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp = new XMLHttpRequest();
       } else {
          // IE6, IE5
          xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
       }
       xmlhttp.open("GET", nomeFile, false);
       xmlhttp.send();
       return xmlhttp.responseXML;
    }
    
    function canzoniere () {      // costruttore del canzoniere
       this.lista = [];           //questo è l'array che contiene l'elenco delle canzoni
       this.aggiungi =
          function (c) {          //metodo per aggiungere alla lista del canzoniere tutte le canzoni
             this.lista.push(c);
            }
    	this.visualizza =         // viasualizzare le canzoni dell canzoniere
       		function(l) {
          var s = "";
          for (var i in l) {
             s += l[i].visualizza();
            }
       
    	return s; 
    
        }
    	this.inizializza =
      	 function (n) {
          var nodo = n.getElementsByTagName("canzoniere")[0];  //carico tutti gli elementi dell xml (partendo dal primo)
          var l = nodo.getElementsByTagName("canzone");   // prendo tutti gli elementi <canzone>
      	  for (var i = 0; i < l.length; i++) {     
             var canzone = new Canzone();   //questa variabile è un nuovo oggetto Canzone
             canzone.inizializza(l[i]);
             this.aggiungi(canzone);       //in alternativa uso "this.lista.push(canzone);" ed elimino il metodo this.aggiungi
            }   
        }
        this.elencoGeneri=  // elenco dei generi che popoleranno la prima select
    	   function (){
    	      var o = "";
    	      o += '<option value="0" selected="selected"> GENERE </option>';
    		  var d=0;
    		  for (var i=0; i<this.lista.length-6; i++) {   // le prime 4 canzoni hanno 4 generi diversi quindi soddisferanno la select
    		     var e="c"+d;      			//id dinamico
    		     o += '<option value="' + this.lista[i].genere + '" id="' + e + '">' + this.lista[i].genere + '</option>';
    		    d++;
    		  }
    		return o;
    	} 
    	this.elencodifficolta=  // elenco delle difficolta che popoleranno la seconda select
    		   function (){
    	          var o2 = "";
    	          o2 += '<option value="0" selected="selected"> DIFFICOLTA </option>';
    		      var d2=0;
    		      for (var i=0; i<this.lista.length -7; i++) {   // le prime 3 canzoni hanno 3 difficolta diverse quindi soddisferanno la select
    		         var e="c"+d2;      			//id dinamico
    		         o2 += '<option value="' + this.lista[i].difficolta + '" id="' + e + '">' + this.lista[i].difficolta + '</option>';
    		         d2++;
    		     }
    		return o2;
    	} 
    	this.elencotonalita= // elenco delle tonalita che popolerranno la terza select
    		   function (){
    	         var o3 = "";
    	         o3 += '<option value="0" selected="selected"> TONALITA </option>';
    		     var d3=0;
    		     for (var i=0; i<this.lista.length-3; i++) {   // le prime 7 canzoni hanno 7 tonalita diverse quindi soddisfano la select
    		        var e="c"+d3;      			//id dinamico
    		        o3 += '<option value="' + this.lista[i].tonalita + '" id="' + e + '">' + this.lista[i].tonalita + '</option>';
    		        d3++;
    		}
    		return o3;
    	}
    	this.cercaTutto= // metodo ricerca tutto
    		function (a,b,c){
    			var l = [];
    			if (a==0 && b==0 && c==0){
    				for (i in this.lista){
    					l.push(this.lista[i]);
    				}
    			}else if (a==0 && b != 0 && c != 0){
    				for (i in this.lista){
    					if (this.lista[i].difficolta == b && this.lista[i].tonalita == c) {
    					l.push(this.lista[i]);
    					}
    				}
    			}else if(a==0 && b==0 && c!=0){
    				for (i in this.lista){
    					if (this.lista[i].tonalita == c) {
    						l.push(this.lista[i]);
    					}
    				}	
    			}else if(a!=0 && b==0 && c==0){
    				for (i in this.lista){
    					if (this.lista[i].genere == a) {
    						l.push(this.lista[i]);
    					}
    				}
    			}else if(a!=0 && b!=0 && c==0){
    				for (i in this.lista){
    					if (this.lista[i].genere == a && this.lista[i].difficolta == b) {
    						l.push(this.lista[i]);
    					}
    				}
    			}else if(a!=0 && b==0 && c!=0){
    				for (i in this.lista){
    					if (this.genere[i] == a && this.lista[i].tonalita == c) {
    						l.push(this.lista[i]);
    					}
    				}	
    			}else if(a==0 && b!=0 && c==0) {
    				for (i in this.lista){
    					if (this.lista[i].difficolta == b) {
    						l.push(this.lista[i]);
    					}
    				}
    			}else{
    				for (i in this.lista){
    					if (this.lista[i].genere==a && this.lista[i].difficolta==b && this.lista[i].tonalita == c) {
    						l.push(this.lista[i]);
    					}
    				}
    			}
    	return l;
    	}
    }															
    
    function ricerca() {										//funzione ricerca derivante da visualizza.onclick
    	var select1 = document.getElementById("selectGenere");
    	var select2 = document.getElementById("selectDifficolta");
    	var select3 = document.getElementById("selectTonalita");
    	var i=0; //selezione genere
    	while ((i<select1.options.length) && (!select1.options[i].selected)) {
    	   i++;
    	}
    	var j=0; //selezione difficolta
    	while ((j<select2.options.length) && (!select2.options[j].selected)) {
    	   j++;
    	}
    	var k=0; //selezione tonalita
    	while ((k<select3.options.length) && (!select3.options[k].selected)) {
    	   k++;
    	}
    	var l = ilCanzoniere.cercaTutto(select1.options[i].value,select2.options[j].value,select3.options[k].value);
    	var nodo = document.getElementById("lista");
    	if (l == "") {
    		nodo.innerHTML = ("nessun risultato");
    	} else {
    		nodo.innerHTML = ilCanzoniere.visualizza(l);
    	}
    }
    	
    
    function Canzone () {    //costruttore dell oggetto canzone c
       this.genere;
       this.titolo;
       this.difficolta;
       this.tonalita;
       this.origine;
       this.testo;
       this.visualizza =
    	function() {
          return   '[*]'+''+this.titolo+'' +  '' +'
    '
    	}
    	this.inizializza =
       		function(nodo) {
          		var c = nodo.getAttribute("genere");
          		this.genere = c;
          		var lt = nodo.getElementsByTagName("titolo");
          		var t = lt[0].firstChild.nodeValue;
        	  	this.titolo = t;
          		var ld = nodo.getElementsByTagName("difficolta");
          		var d = ld[0].firstChild.nodeValue;
          		this.difficolta = d;
          		var lto = nodo.getElementsByTagName("tonalita");
         		var to = lto[0].firstChild.nodeValue;
          		this.tonalita = to;
    			var lori = nodo.getElementsByTagName("origine");
         		var ori = lori[0].firstChild.nodeValue;
          		this.origine = ori;
    			var ltesti = nodo.getElementsByTagName("testo");
    			var testi = ltesti[0].firstChild.nodeValue;
    			this.testo = testi;
    			
    	}
    }
    
    
    
    var ilCanzoniere;
    function inizializza() {
       var nodo = caricaXML("js/canzoniere.xml");
       ilCanzoniere = new canzoniere();
       ilCanzoniere.inizializza(nodo);
       var lista1 = document.getElementById("selectGenere"); 
       var lista2 = document.getElementById("selectDifficolta"); 
       var lista3 = document.getElementById("selectTonalita");
       lista1.innerHTML = ilCanzoniere.elencoGeneri();  
       lista2.innerHTML = ilCanzoniere.elencodifficolta(); 
       lista3.innerHTML = ilCanzoniere.elencotonalita(); 
       lista1.onchange=ricerca;	
       lista2.onchange=ricerca;
       lista3.onchange=ricerca; 
       
    
    }
    window.onload = inizializza;
    qui il codice html :

    codice:
    </head>
    <body>
       <div id="menu">
    	   <ul>
    			[*]Home
    			[*]La guida
    			[*]Primi passi
             <li id="current">Canzoniere galattico
    			[*]Chitarristi
    		[*]Contatti[/list]
       </div>
       <div id="header">
          <div id="header2">
          </div>
       </div>
       <div id="divisore">
          <h1>Canzoniere</h1>
       </div>
       <div id="contenuto">
          <div id="subcontenuto">
             <select id="selectGenere"></select>
             <select id="selectDifficolta"></select>
             <select id="selectTonalita"></select>
             <input id="visualizza" type="button" value="VisualizzaCanzoni">
             
    
             
    
             <h2> canzoni presenti nel nostro database </h2>
    		 <h1> Aggiungi una canzone nella text area per visualizzare gli accordi e modificarla</h1>
    		  <textarea rows="4" cols="50"> </textarea>
             
    </br>
       <div id="aumentatore"></div>
    
    </div> <div id="testida"> </div> </div> <div id="footer"> </div> </body> </html>
    Nella text area dovrebbe andarci il valore di this.testo che corrisponde nel XML ad un testo preformattato. consigli su come fare?

  2. #2
    Utente di HTML.it
    Registrato dal
    Oct 2009
    Messaggi
    636
    C'è parecchio codice difficile che qualcuno lo legga tutto, e non ho ben capito il reale problema.

    Da quello che ho capito da delle select prendi dei parametri al click su un pulsante invii una richiesta asincrona, ricevi qualcosa da visualizzare e lo devi visualizzare in una textarea.

    La richiesta parte e da in risposta ciò che desideri?
    Non riesci a selezionare la textarea?
    Non riesci a fare il parsing dell' XML?

    Un consiglio che posso darti, anche se non so se ti serve, è di aiutarti con gli strumenti per sviluppatori messi a disposizione dai browser o con firebug per monitorare la richiesta asincrona.

  3. #3
    Grazie per la risposta ma alla fine ho risolto tutto da solo

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 © 2025 vBulletin Solutions, Inc. All rights reserved.