Far comparire textarea di modifica

[stefano9192]

Ciao a tutti!

ho una pagina php con una tabella, volevo fare in modo che cliccando sui campi della tabella, questi diventassero editabili tramite una textarea in modo da poter modificare il valore e lanciare la query di modifica.
Sto facendo il sito in php, javascript non lo conosco bene purtroppo, però mi sembra di capire che sia l'unica strada.
Pensavo di creare una textarea e renderla invisibile e al click del mouse su un campo della tabella attivarla tramite una funzione javascript..
- si può fare e può essere un buon metodo?
- esistono delle soluzioni in php?
ps: un esempio di quello che vorrei fare è come in phpmyadmin al click su un campo di una tabella del database.

[cavicchiandrea]

Si può fare, ma non è facile sopratutto quando non si conosce js, volendo e possibile farlo anche php ma dovrai ricaricare la pagina.

[fra9494]

Puoi anche pensare di far comparire una finestrella, che poi alla fine è un div, con all'interno una textarea o una textbox con sotto due bottoni, annulla conferma. Cosi facendo quando l'utente andrà a cliccare il tasto conferma, ti servirà solo il php per inserirlo nel database (e ovviamente una funzioncina di ajax per far comunicare JS e PHP).

Diciamo che per fare ciò, serve sia JS che Ajax, anche se bastano davvero due funzioni di numero, ed è molto intuitivo.
spero di esserti stato di aiuto.

[stefano9192]

Grazie per le risposte!
Allora la strada consigliata da cavicchiandrea non sarebbe male dato che resto sul php, ma dato che dovrei ricaricare tutta la pagina per stampare solo una textarea/textbox ho provato con il javascript seguendo il consiglio di fra9494.
Mi è stato molto utile il consiglio!
Ho messo una label che se schiacciata viene sostituita da una textarea e viceversa.
questo è il codice della pagina home.php:

- prima parte: una tabella di prova
- seconda parte : la sezione script dove ho messo le funzioni javascript

 

  <table border="1">
  <thead>                    
            <tr>
               <th> <label onClick="toggleVisibility()" > Nome </label> </th>               
               <th><label onClick="toggleVisibility()" > Cognome </label></th>
            </tr>
  </thead>    
  <tbody>                
                 <tr>                 
                   <td> <label id ="label" onClick="abilitaText()" > mario </label> <textarea id="input" cols="5" onblur="disabilitaText()" style="display:none" onChange="invia()"> </textarea> </td>
                   <td> <label onClick="toggleVisibility()" > Rossi </label>  </td>
                 </tr>  
  </tbody>                                  
  </table>
  
<script type="text/javascript" charset="utf-8">


// eseguita al click sulla label, rende visibile la textbox     (devo rendere subt attiva la box)
function abilitaText() {  
var valore =  document.getElementById('label').innerHTML; // valore label
var textbox = document.getElementById('input');           // ricavo la textbox
  if (textbox.style.display=='none'){
    textbox.style.display = '';                           // la attivo
    document.getElementById('input').value=valore;        // metto il valore della label
   
   //nascondo la label 
   var label = document.getElementById('label'); 
   label.style.display='none'; 
  } 
}
// eseguita al cambiamento dati della textbox, invia i dati a una pagina php per eseguire le modifiche
function invia() {
 var par =  document.getElementById('input').value ;
 document.location.href="ins.php?par="+par;
}


//eseguita quando la textbox non è piu attiva, toglie la textbox (se l'utente non vuole fare la modifica)
function disabilitaText() {
  var textbox = document.getElementById('input');
    textbox.style.display='none';
    
    // rimetto la label
    var label = document.getElementById('label'); 
    label.style.display=''; 
}


</script> 

sembra funzionare!!!!

- se avete tempo potete dirmi che ve ne pare della soluzione?
- se riesco vorrei aggiungere un passaggio di parametri con ajax (usando post) per unq questione di sicurezza.

[cavicchiandrea]

A scopo didattico ho fatto questo usando jquery ajax e php, per quanto concerne il tuo se funziona ok, ho qualche dubbio che funzioni correttamente se i campi d'aggiornare sono più di uno

[fra9494]

Grazie per le risposte!
Allora la strada consigliata da cavicchiandrea non sarebbe male dato che resto sul php, ma dato che dovrei ricaricare tutta la pagina per stampare solo una textarea/textbox ho provato con il javascript seguendo il consiglio di fra9494.
Mi è stato molto utile il consiglio!
Ho messo una label che se schiacciata viene sostituita da una textarea e viceversa.
questo è il codice della pagina home.php:

- prima parte: una tabella di prova
- seconda parte : la sezione script dove ho messo le funzioni javascript

 

  <table border="1">
  <thead>                    
            <tr>
               <th> <label onClick="toggleVisibility()" > Nome </label> </th>               
               <th><label onClick="toggleVisibility()" > Cognome </label></th>
            </tr>
  </thead>    
  <tbody>                
                 <tr>                 
                   <td> <label id ="label" onClick="abilitaText()" > mario </label> <textarea id="input" cols="5" onblur="disabilitaText()" style="display:none" onChange="invia()"> </textarea> </td>
                   <td> <label onClick="toggleVisibility()" > Rossi </label>  </td>
                 </tr>  
  </tbody>                                  
  </table>
  
<script type="text/javascript" charset="utf-8">


// eseguita al click sulla label, rende visibile la textbox     (devo rendere subt attiva la box)
function abilitaText() {  
var valore =  document.getElementById('label').innerHTML; // valore label
var textbox = document.getElementById('input');           // ricavo la textbox
  if (textbox.style.display=='none'){
    textbox.style.display = '';                           // la attivo
    document.getElementById('input').value=valore;        // metto il valore della label
   
   //nascondo la label 
   var label = document.getElementById('label'); 
   label.style.display='none'; 
  } 
}
// eseguita al cambiamento dati della textbox, invia i dati a una pagina php per eseguire le modifiche
function invia() {
 var par =  document.getElementById('input').value ;
 document.location.href="ins.php?par="+par;
}


//eseguita quando la textbox non è piu attiva, toglie la textbox (se l'utente non vuole fare la modifica)
function disabilitaText() {
  var textbox = document.getElementById('input');
    textbox.style.display='none';
    
    // rimetto la label
    var label = document.getElementById('label'); 
    label.style.display=''; 
}


</script> 

sembra funzionare!!!!

- se avete tempo potete dirmi che ve ne pare della soluzione?
- se riesco vorrei aggiungere un passaggio di parametri con ajax (usando post) per unq questione di sicurezza.

Ciao, si mi sembra interessante!
Credo funzioni anche se i campi sono più di uno, viene eseguito prima il Javascript e poi eventualmente ajax o php...Quindi anche se i campi da aggiornare sono più di uno, le funzioni vengono eseguite tutte in modo sequenziale. Non so se mi sono spiegato bene, ma tu prova, se va è perfetto!

[stefano9192]

Ma è stupendooo!!

si si il mio codice ha quel problema, se i campi sono più di uno aggiorna sempre il primo.
Dato che costruisco la pagina in php dando un'opportuna numerazione all'attributo 'id' dovrei riuscire a risolvere il problema (come hai fatto tu circa).

Il tuo esempio è perfetto, molto più ordinato ed efficace del mio!
Ho preso spunto per migliorare il mio! grazie!
Ora l'usabilità è perfetta, solo che non va ancora la parte più importante, ovvero il passaggio di parametri ad una pagina php!
Se modifico la funzione AggiornaDato() mettendo un passaggio normale tramite GET funziona!
la pagina php si chiama: ins.php, e viene chiamata correttamente con tutti i parametri!
Facendo cosi:

function AggiornaDato(nome_input,valore,record,riga){    


var dati = nome_input+"="+$("#"+nome_input).val()+"&id="+record+"&row="+riga; 
 document.location.href="ins.php?"+dati;


}

Però la funzione originale, ovvero questa:

function AggiornaDato(nome_input,valore,record,riga){
    
    var dati = nome_input+"="+$("#"+nome_input).val()+"&id="+record+"&row="+riga;
    if(valore!=$("#"+nome_input).val()){
    $.post("ins.php",dati,function(responseText){
        $("#risposta").html(responseText).fadeIn(300).delay(5000).fadeOut(200)
        $("#"+nome_input+"_"+record).attr("onclick","cambia(this.id,this.innerHTML,"+riga+")").html($("#"+nome_input).val())
        })
    }else{
        $("#"+nome_input+"_"+record).attr("onclick","cambia(this.id,this.innerHTML,"+riga+")").html($("#"+nome_input).val())
        }
    }

è moooooolto meglio ma non funziona e non so perchè, ho fatto mille tentativi!
Comunque grazie ancora per l'esempio!

[stefano9192]

ok fra9494!
sisi non prendeva bene i campi da modificare ma con una piccola modifica ora funziona!

[cavicchiandrea]

Non funziona!!! Non aiuta, la console cosa dice da un errore? Se quale? Jquery è incluso/installo?

[fra9494]

Per il passaggio di parametri, vediamo se ho capito.
Se ti serve passare i parametri da javascript a php, senza complicarti la vita puoi utilizzare una chiamata Ajax, in questo modo:




//Attivi l'ajax
function new_ajax(){
if (window.XMLHttpRequest)
xmlhttp = new XMLHttpRequest(); //nuovi browsers
else
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //vecchi browsers
return xmlhttp
}


//funzione per la chiamata ajax

function chiamaAjax()
{

.
.
.
xmlhttp = new_ajax();
xmlhttp.onreadystatechange = function() //questa viene eseguita quando la pagina php ha finito il suo compito
{
if (xmlhttp.readyState==4 && xmlhttp.status==200) //se quello che ritorna dalla pagina php non è un errore
{
//fai questo
.......

}
else //mostrami l'errore tornato
alert(xmlhttp.responseText);

}



//Questa parte viene eseguita prima di tutto (prima dell'if precedente) e vengono passati i parametri alla pagina php tramite il metodo //POST


xmlhttp.open("POST","percorso/pagina_php",true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send('azione='+operazione+'&param='+_param etri);



}



Ecco qua, spero che questo codice ti possa servire a qualcosa.