Modificare il contenuto di una cella di tabella aprendo e chiudendo un box di scrittura/salvataggio

[Marcolino's]

Ciao,
premetto che il codice che sto scrivendo in parte funziona, ma ci sono degli aspetti che mi sfuggono e che non riesco a risolvere al momento, mi spiego meglio: avete presente phpmyadmin nella funzionalità "mostra" che crea di fatto una tabella in cui in ogni riga ci sono le celle che mostrano il contenuto del database, e che quando vi cliccate su ( doppio click ) apre un box di editing? Ebbene devo rifare la stessa cosa!
A parole è facile... mi sono andato a guardare il codice di phpmyadmin e ho visto che per realizzare la cosa, mette in fondo alla tabella un <div> con classe cEdit che si apre e mostra il contenuto della cella cliccata dentro una texarea.
All'inizio avevo pensato di realizzare un box dentro ogni cella della tabella, la cosa funziona, ma crea ovviamente un file html gigantesco, anche perché nella pagina ci sono molte altre cose, e la tabella in se può essere anche molto grande ( paginazione? Sì be dopo! ) in ogni caso è impensabile fare così almeno per un motivo.
Dato che devo comunque identificare la cella, il box che si apre e la textarea interna che riporta il contenuto della cella da modificare, ho bisogno per ogni cella della tabella di un certo numero di id e questo porta inevitabilmente ad un uso eccessivo della memoria.
In pratica faccio una cosa del genere:

<td class="click" id="url-12" >
       Questo il contenuto della cella
       <div style="display:none" id="pannello-url-12">
               <textarea class="form-control" id="id-url-12">Questo il contenuto della cella</textarea>
               <p class="btn-group btn-group-sm" role="group">
                     <button type="button" class="btn btn-default"  name="annulla-url-12">Annulla</button>
                     <button type="button" class="btn btn-danger" name="salva-url-12">Salva</button>
               </p>
       </div>
  </td>

Ovviamente le celle sono più di una per riga, ovviamente vengono create dinamicamente lato server, il numero 12 che identifica ogni elemento è arbitrario, è l'indice del loop in php che crea il tutto.
Questo sistema funziona pure ma come dicevo prima crea un problema che può causare molti altri problemi, oltre alla dimensione del file html generato, può creare problemi di memoria su sistemi non modernissimi.
Così mi sono andato a guardare come fa chi lo fa gia da anni, cioè phpmyadmin appunto e ho scoperto che non crea affatto un sistema di box per ogni cella, ma uno solo alla fine della tabella, che poi immagino sposti sopra la tabella cliccata a simulare visivamente per l'utente la posizione.
Vorrei fare la stessa cosa, e penso che la strada sia quella di gestire la posizione del mouse quando si fa doppio click sulla cella, in modo da sapere su quale cella si è fatto il doppio click e quindi posizionare il box di editing su quella cella.
Ma questo mi crea un altro problema: monitorare la posizione del mouse è facile, difficile è sapere sopra quale cella si trova, dovrei forse creare un elenco di posizioni ( x, y ) per ogni cella?
Ho notato che phpmyadmin mette nel box cEdit uno style con le posizioni top e left molto precide:

--- Le celle sono identificate così:
<td class="data grid_edit click2 not_null    " data-type="string" data-decimals="0"><span>http://armorgames.com/</span></td>
--- in pratica non sono affatto identificate

----- Questo il campo di editing
<div class="cEdit" style="display: none; top: 719.533px; left: 800.8px;">

---- oppure

<div class="cEdit" style="display: block; top: 660.667px; left: 1117.4px;">

A seconda di dove si fa click cambia la posizione del box che si posiziona sulla giusta cella; ovvio che il sistema monitorizza la posizione del mouse e gestisce il posizionamento del box in funzione di questo, ma come?
Non sono riuscito a trovare all'interno di ogni file uno script js che riporti posizioni delle celle come si faceva con gli sprite per scoprire le collisioni nei videogames, insomma non so come faccia e l'altra unica alternativa che mi viene in mente a questo punto è aprire il box al centro dello schermo indipendentemente dalla posizione di ogni cella dove si clicca.

Bene! Dopo questa lunga chiacchierata ( un monologo ) avete qualche idea da mostrarmi?
Grazie.

[lucavizzi]

ovvio che il sistema monitorizza la posizione del mouse e gestisce il posizionamento del box in funzione di questo

Questa supposizione è assolutamente errata, nessuno sviluppatore con un minimo di conoscenza del DOM la attuerebbe.


La normale prassi consiste nell'associare un evento al click su una cella e poi sostituire l'HTML della cella con qualcos'altro.
Ti scrivo un esempio con jQuery:

$(function(){
   $('#table_id td').click(function(){
      var cella_cliccata=$(this);
      var contenuto_della_cella=$(this).html();
      var nuovo_contenuto='<input value="'+contenuto_della_cella+'">';
      
      cella_cliccata.html(nuovo_contenuto);
   });
});

Questa soluzione è la normale prassi e va bene nella maggior parte dei casi, considerando che dovrai comunque paginare la tabella.


Se gli elementi cui associare l'evento fossero davvero molti, esistono degli approcci per evitare di associare un evento ad ogni singolo elemento, migliorando così le performances generali. Con jQuery si può usare delegate.

[cavicchiandrea]

http://webandylab.altervista.org/update_phpadmin.php

[cassano]

Ormai con Jquery non si una .on ?

[lucavizzi]

Ormai con Jquery non si una .on ?

This method is a shortcut for .on( "click", handler )

https://api.jquery.com/click/

[Marcolino's]

Grazie ragazzi.
Ovvio che quell'ovvio era fuorviante io mi sono guardato il codice usato da phpmyadmin e a parte quanto da me scritto non sono riuscito a dipanare la matassa dei vari file di script che lo gestiscono, quindi ho cercato una strada diversa.
Vedo che invece era più veloce di quanto immaginavo io.
Che dire, bene e grazie.

[Marcolino's]

Se gli elementi cui associare l'evento fossero davvero molti, esistono degli approcci per evitare di associare un evento ad ogni singolo elemento, migliorando così le performances generali. Con jQuery si può usare delegate.

Leggevo giusto di quanto hai scritto sul sito di jquery relativamente a delegate e ho scoperto che:

As of jQuery 1.7, .delegate() has been superseded by the .on() method. For earlier versions, however, it remains the most effective means to use event delegation. More information on event binding and delegation is in the .on() method. In general, these are the equivalent templates for the two methods:

[Marcolino's]

Comunque, dato che sono un "Pierino", e per fortuna, ho studiato tutte i modi possibili e ho unito uno all'altro.
Pur essendo io un amante del pure javascript avendo usato jquery nella pagina ho continuato ad usarlo e ne è uscito ciò:

<table>
<tr>
  <td id="titolo-12">Giochi Gratis Online, Flash games :: MiniGiochi.IT - Sito di giochi in Flash</td>
  <td id="didascalia-12">Migliaglia di giochi, Minigiochi.IT giochi in Flash gratuiti, accesso senza egistrazione, divertimento assicurato</td>
  <td id="url-12">http://www.minigiochi.it</td>
  <td id="lingua-12">it</td>
</tr>
</table>
<div class="edit" style="display:none">  <textarea></textarea>  <p class="button-group">    <button type="button" class="btn btn-default" id="annulla">Annulla</button>    <button type="button" class="btn btn-danger" id="salva">Salva</button>  </p></div>
<script>
$( document ).ready( function(){													    $( 'td' ).on( 'dblclick', function() {        var pos = $( this ).position(),        x = pos.left, y = pos.top,	idCampo = $( this ).attr( 'id' );															$( '.edit' ).css( {'top': y + 'px', 'left': x + 'px'} );	$( '.edit textarea' ).attr( 'id', 'text-' + idCampo );	$( '.edit textarea' ).text( $( this ).text() );	$( '.edit' ).show();	$( '#annulla' ).click( function() {		$( '.edit' ).hide(); 	});	$( '#salva' ).click( function() {		$.ajax({			url: 'setupSchedaSito.php',			type: 'POST',			dataType: 'json',			data: {				id: idCampo.split( '-' )[1],				nomeCampo: idCampo.split( '-' )[0],				contenuto: $( '#text-' + idCampo ).val()			},			complete: function(){				$( '.edit' ).hide();	        	}        	});	   });    });                                               });</script>

Ovviamente la formattazione tramite CSS è a parte, la maggior parte di essa è demandata al framework bootstrap e il resto è modificata a manetta, ovviamente la tabella mostrata è solo un estratto di una cosa fatta tramite la lettura di un database e quindi creata al momento tramite PHP, ma alla fine, funziona benissimo.

Uff ce l'ho quasi fatta! ( non è vero mancando le verfiche e la gestione degli errori via ajax, ma è più facile ;-) )

Grazie a tutti comunque.

[Marcolino's]

Oooops scusate per la (s)formattazione del codice javascript, ho incasinato modificando a mano le tabulazioni