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

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.
 

ale_70

Nuovo Utente
10 Set 2013
4
0
0
...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ù!
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
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
 

ale_70

Nuovo Utente
10 Set 2013
4
0
0
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.
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
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'
 

ale_70

Nuovo Utente
10 Set 2013
4
0
0
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
Autore Titolo Forum Risposte Data
L Bing prima pagina prima riga; Google mi ignora SEO e Posizionamento 0
S impostare un testo e una img nella stessa riga con jsPDF Javascript 0
C media per riga MySQL 1
B Crea pdf da tabella mysql "ultima riga modificata" MySQL 4
M Tabella con riga più lunga HTML e CSS 6
Samuele Ronzani Suono di notifica in nuova riga MySQL 28
A aggiungere stringa all'inizio di ogni riga di un file txt PHP 3
S Cancellare una riga MYSQL PHP 1
felino Excel: popolare una cella con la data di modifica della riga a cui appartiene Windows e Software 3
P textbox- scrivere tutto su una sola riga anche se si va a capo .NET Framework 2
B visualizzare una sola riga Database 3
E [PHP] problemi nuova riga con fwrite su piattaforma android PHP 5
Cosina [PHP] Cancellare una riga da un file di testo in base al nome PHP 2
Cosina [PHP] Cancellare una riga da un file txt in base alla data PHP 1
B [PHP] Elimina quindi aggiungi una riga in un file di testo PHP 0
A [PHP] Cancellare riga database a scelta dell'utente PHP 2
C [PHP] Elimina riga tabella PHP 9
MikSkagit [PHP] Risultati a video sulla stessa riga PHP 12
G [Javascript] eseguire test-case Selenium da riga di comando... Javascript 0
A Creazione automatica pagina php da id della riga di una tabella PHP 1
A [WordPress] Eliminare riga codice HTML WordPress 6
elpirata [Javascript] Disabilitare campo input quando si aggiunge riga nuova Javascript 0
M [HTML] stampa riga condizionata HTML e CSS 3
A [PHP] Dati su una riga concatenati dalla data PHP 5
giancadeejay [PHP] checkbox ad ogni riga estratta dal db PHP 13
ANDREA20 [PHP] Errore riga PHP 0
L [Javascript] Aggiungere una riga ad una tabella Javascript 5
fabryx [PHP]RISOLTO: eliminazione riga con singolo valore duplicato in array PHP 19
M riga dei sottomenù in php? PHP 2
ANDREA20 [PHP] problema riga PHP 5
A phpmyadmin importa solo prima riga csv PHP 1
G Come si a fare una riga con pallini con photoshop? Photoshop 1
MarcoGrazia Riga di tabella dinamica e suggeritore Javascript 2
M Come recuperare valori della riga di una tabella creata dinamicamente da un file esterno? Javascript 11
L intestazione di tabella HTML continua a ripetere per ogni riga della tabella PHP 5
G estrarre parametri dalla riga di comando PHP 0
JackIlPazzo Sostituire una riga specifica in un file di testo senza cancellare il rimanente PHP 13
D batch leggere ultima riga e salvarla Programmazione 0
P problemi con inser into e riga bianca nel db PHP 6
R Ottenere il numero di riga di una tabella mysql contenente un nome specifico PHP 1
E Cercare un valore e scrivere tutta la riga txt che lo contiene PHP 15
L file. leggere dall'ultima riga alla prima PHP 1
D Convertitore una riga da HTML in PHP PHP 1
L aggiungere riga con numero incrementale jQuery 2
L [c++] Problema leggere file txt riga per riga C/C++ 0
IImanuII mysql query random riga PHP 5
V Rimuovere una riga <tr> da una tabella Javascript 7
M [risolto] leggere dati mysql riga per riga MySQL 4
M leggere la seconda riga di un database mysql PHP 1
P Problemi di avere il titolo in un unica riga con carattere 18px HTML e CSS 12

Discussioni simili