la riga clonata non risponde alle funzioni javascript come la riga madre.

  • Creatore Discussione Creatore Discussione ale_70
  • Data di inizio Data di inizio

ale_70

Nuovo Utente
10 Set 2013
4
0
0
Salve a tutti,
premetto che sono un neofita in fatto di programmazione, circa tre mesi fa ho cominciato, per curiosità e per necessità, a fare assidue ricerche sul web per realizzare un semplice cms per lavoro. I risultati sono stati soddisfacenti, direi oltre le aspettative, e siccome ci ho preso gusto voglio realizzare un registro chiavi. E vengo al nocciolo della questione: si tratta di una tabella, 5 colonne, alcune (3) contengono delle select le cui option sono collegate ad un db mysql, ed altre (2) sono campi (input) nei quali andrà inserita la data di rilascio e la data di riconsegna. Il funzionamento è semplice, nel momento in cui l'utente ritira la chiave si inserisce attraverso la select il nominativo dell'interessato e automaticamente appare la data e l'ora di ritiro nel relativo campo. Stessa cosa accade nella riconsegna. Tutto qui. Il problema nasce quando voglio clonare la riga e ottenere le medesime caratteristiche della 'madre': non solo i nuovi campi (input) delle date mi riportano i valori precedenti (questo non succede con i select) ma non rispondono più alle funzioni javascript per l'assegnamento automatico della data di rilascio/riconsegna al variare della select. Spero di essere stato chiaro, vi posto la funzione JS:

HTML:
<script type="text/javascript">
function clona_riga() {
    var n=0;
    var riga=document.getElementById("dati");
    var newRiga=riga.cloneNode(true);
    n++;
    newRiga.setAttribute("id","dati"+n);
    newRiga.childNodes[1].nodeValue=null;
    newRiga.childNodes[3].nodeValue=null;
    riga.parentNode.appendChild(newRiga);
    }
   
</script>

dove "dati" è l'id della tr del tbody.
Grazie spero di non essere stato noioso.
 
...niente, ho provato ad applicare alcune soluzioni navigando in rete ma non girano come dovrebbero così sono al punto di partenza. Nessuno che mi da una mano???
Mi occorre settare la riga clonata in modo che abbia la stessa funzionalità della prima. Provo a fornirvi altro codice:

HTML:
<script type="text/javascript">
        function data_rilascio() {

//acquisisco i valori tramite i metodi get fino a formare la variabile data//
        
var data= gg+"/"+mm+"/"+aa;

//la stessa cosa per l'orario//

var orario=ora+":"+min;

//infine inserisco le variabili dentro il campo input//

document.chiavi.datau.value=data+'  -  '+orario;
}

function data_riconsegna() {  // stessa procedura, cambia solo l'elemento input di riferimento in 'datae'//}

Le funzioni vengono richiamate attraverso gli attributi onchange inseriti nelle rispettive select. Tutto funziona con la riga di partenza ma quando clono con il tasto apposito la nuova riga si dissocia dalle funzioni js alle quali non risponde neanche più la prima. Come posso risolvere?? Non ne esco più!
 
Ciao, io non sono riuscito a capire perchè devi clonare la riga,
comunque sicuro di non ritrovarti con due id uguali ? ( prova a visualizzare il sorgente )
non è possibile avere due elementi con lo stesso l'id altrimenti lo script non funziona
 
Ciao, anzitutto grazie per l'interessamento, ho bisogno di clonare la riga perché siccome trattasi di un registro chiavi ogni riga identifica il possessore e la data di rilascio nonché quella di restituzione relativamente ad una chiave, dovendo tenere sotto controllo un paio di centinaia di chiavi ho bisogno per forza di nuovi campi per poterle inserire. A questo scopo avevo previsto anche l'invio di un report giornaliero...ma questo è un altro paio di maniche. Avevo intuito anch'io che era una questione di settaggi dell' id ma il punto è che ho tentato ma probabilmente mi sfugge qualcosa o sbaglio nella sintassi:

HTML:
<body><center>
<form name="reg_chiavi" id="reg_chiavi" method="POST" >
<table border="3" width="80%">
<thead><tr><td colspan="5">
<p align="center"><font size="5" face="Verdana" color="#0000FF">REGISTRO&nbsp CHIAVI</font></p></td></tr>
<tr><td><p align="center" /><font size="3" face="Verdana" color="#FF0000">Chiave</font></td><td><p align="center" /><font size="3" face="Verdana" color="#FF0000">Data di rilascio</font></td>
    <td><p align="center" /><font size="3" face="Verdana" color="#FF0000">Utente</font></td><td><p align="center" /><font size="3" face="Verdana" color="#FF0000">Data di riconsegna</font></td>
    <td><p align="center" /><font size="3" face="Verdana" color="#FF0000">Operatore</font></td></tr></thead>
<tbody><tr id="dati"><td><center> // queste due select identificano la chiave e si trovano nel primo <td>//
<select size="1" name="edificio" id="edificio">
 <option value="">ED.</option>
// <option value.......</option></select>//
<select size="1" name="stanza" id="stanza">
  <option value="">N.</option>
// <option value.......</option></select></center></td>//
<td><center><input type="text" name="datau" id="datau"/> // campo dove apparirà la data di rilascio chiave //
</center></td><td><center><select name="utente" id="utente" onchange="return data_rilascio()"> // la select collegata a mysql degli utenti //
 <option selected="NULL"> Cognome / Nome </option>
 <?php
 while ($r=mysql_fetch_array($risultato)) {$c=ucwords($r['cognome']); $n=ucwords($r['nome']);
 print "<option value='$c,$n'>$c &nbsp $n</option>\n";} ?>
</select></center></td><td><center><input type="text" name="datae" id="datae"/> // campo dove apparirà la data di riconsegna chiave //

</center></td><td><center><select name="operatore" id="operatore" onchange="return data_riconsegna()"> // la select collegata a mysql degli operatori //

 <option selected="NULL"> NON RESTITUITA </option>
 <?php
 while ($riga=mysql_fetch_array($result)) {$op=ucwords($riga['nominativo']); 
 print "<option value='$op'>$op</option>\n";} ?>
</select></center></td></tr></tbody>
</table></form></center>

<input type="button" name="aggiungi" value="Aggiungi riga" onclick="return clona_riga()"/>
      

</body>
</html>
Ciao grazie per la tua pazienza.
 
Cominciamo dalla prima funzione
Codice:
function clona_riga() {
    var n=0;
    var riga=document.getElementById("dati");
    var newRiga=riga.cloneNode(true);
    n++;
    newRiga.setAttribute("id","dati"+n);
    newRiga.childNodes[1].nodeValue=null;
    newRiga.childNodes[3].nodeValue=null;
    riga.parentNode.appendChild(newRiga);
    }
var n=0; devi metterlo fuori dalla funzione altrimenti ogni volta che la richiami azzeri e incrementi il contatore e di conseguenza tutti i cloni avranno id='dati1'
 
grazie criric, l'osservazione è giusta infatti l'avevo messa già in atto ma l'esito non è migliorato di molto.
Sono ancora alla ricerca di una soluzione nel frattempo ho elaborato uno script un po' più complesso, se ti va dagli un'occhiata e dimmi cosa non ti torna:
HTML:
function clona_riga() {
var tb=document.getElementById('tabella').getElementsByTagName('tbody')[0]; //rif al tbody 
var counter = tb.getElementsByTagName('tr').length;
var basetr = document.getElementById('dati');
var newtr = basetr.cloneNode(true);
for (var c=0;c<counter;c++)
newtr.setAttribute('id','dati'+c);// la nuova riga acquisisce il nuovo id 
var tdArr = newtr.getElementsByTagName('td'); // prendo array TD della nuova riga e setto i vari attributi

tdArr[0].getElementsByTagName('select')[0].setAttribute('id','edificio'+c);
tdArr[0].getElementsByTagName('select')[0].setAttribute('name','edificio'+c);
tdArr[0].getElementsByTagName('select')[1].setAttribute('id','stanza'+c);
tdArr[0].getElementsByTagName('select')[1].setAttribute('name','stanza'+c);
tdArr[1].getElementsByTagName('input')[0].setAttribute('id','datau'+c);
tdArr[1].getElementsByTagName('input')[0].setAttribute('name','datau'+c);
tdArr[2].getElementsByTagName('select')[0].setAttribute('id','utente'+c);
tdArr[2].getElementsByTagName('select')[0].setAttribute('name','utente'+c);
tdArr[2].getElementsByTagName('select')[0].onchange=function(){data_rilascio('datau'+c);} // setto l'attributo onchange nel TD corrispondente alla select
tdArr[3].getElementsByTagName('input')[0].setAttribute('id','datae'+c);
tdArr[3].getElementsByTagName('input')[0].setAttribute('name','datae'+c);
tdArr[4].getElementsByTagName('select')[0].setAttribute('id','utente'+c);
tdArr[4].getElementsByTagName('select')[0].setAttribute('name','utente'+c);
tdArr[4].getElementsByTagName('select')[0].onchange=function(){data_riconsegna('datae'+c);}

  for(var i=0; i<5; i++){ //creo un loop utile per svuotare i campi input
    if(i==1){ 
      newtr.getElementsByTagName('input')[1].value=''; 
    } 
    else if(i==3){ 
        newtr.getElementsByTagName('input')[3].value = ''; 
      } 
    } 
 document.getElementById('tabella').getElementsByTagName('tbody')[0].appendChild(newtr); 
}
Ciao e grazie ancora!
 

Discussioni simili