Ciao,
ho un problema che non riesco a comprendere, mi spiego: tramite PHP/MySQL creo una tabella con i dati di alcuni record di un database, cosa abbastanza banale in se; poi tramite jquery/javascript controllo se l'utente fa click ( double click ) su una cella della tabella, nel caso apro un box con una textarea di editing.
Un po' come fa phpmyadmin per permettere di modificare un campo di record del database.
Tramite un banale tasto SALVA ( invece che cliccare fuori dal campo di editing ) mando una richiesta ajax ad una pagina remota che mi salva ( update ) il dato contenuto nel database.
Fino a qui tutto bene, solo che la prima volta va bene, poi con la seconda cella, lo fa mandando due richieste via ajax, poi tre, poi... insomma non comprendo perché fa così.
Ora il codice incriminato:
Ovviamente la tabella è più grande, ho reso solo alcune righe ma la sostanza non cambia, anche se fosse nua sola fa la stessa cosa.
ho un problema che non riesco a comprendere, mi spiego: tramite PHP/MySQL creo una tabella con i dati di alcuni record di un database, cosa abbastanza banale in se; poi tramite jquery/javascript controllo se l'utente fa click ( double click ) su una cella della tabella, nel caso apro un box con una textarea di editing.
Un po' come fa phpmyadmin per permettere di modificare un campo di record del database.
Tramite un banale tasto SALVA ( invece che cliccare fuori dal campo di editing ) mando una richiesta ajax ad una pagina remota che mi salva ( update ) il dato contenuto nel database.
Fino a qui tutto bene, solo che la prima volta va bene, poi con la seconda cella, lo fa mandando due richieste via ajax, poi tre, poi... insomma non comprendo perché fa così.
Ora il codice incriminato:
HTML:
<table>
<tbody>
<tr>
<td>27</td>
<td class="click" id="titolo_sito-28">TOKIO-GHOUL News Article<br>- GameSamba</td>
<td class="click" id="didascalia-28" >TOKIO-GHOUL il nuovo<br>gioco che arriverà nel<br>2016</td>
<td class="click" id="url-28" >http://gamesamba.net/announcem</td>
<td class="click" id="lingua-28">en</td>
<td class="click" id="argomento--28">Blog a tema giochi</td>
</tr>
<tr>
<td>28</td>
<td class="click" id="titolo_sito-29">The latest and funniest<br>webgames---All in<br>Game321.com</td>
<td class="click" id="didascalia-29" >Dragons Spear is inspired<br>by western dragon<br>mythologies. It is a<br>MMOARPG that based on a<br>virtual world Dragaeri.</td>
<td class="click" id="url-29" >http://spear.game321.com/</td>
<td class="click" id="lingua-29">en</td>
<td class="click" id="argomento--29">Siti di giochi in Flash ®</td>
</tr>
</tbody>
</table>
<div class="edit" style="display:none">
<textarea style="display:none" id="contenuto"></textarea>
<input type="text" id="lingua" value="" style="display:none">
<select style="display:none" id="argomento">
<option value="1">Siti di giochi in Flash ®</option>
<option value="2">siti di giochi online</option>
<option value="3">Siti di giochi offline</option>
<option value="4">Siti di giochi per mobile</option>
<option value="5">Forum ai siti di giochi</option>
<option value="6">Siti di giochi Hot</option>
<option value="7">Directory autori</option>
<option value="8">Blog a tema giochi</option>
<option value="9">Riviste tematiche sui giochi</option>
</select>
<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(){
function chiudi() {
$( '.edit textarea' ).hide();
$( '.edit select' ).hide();
$( '.edit input' ).hide();
$( '.edit' ).hide();
};
$( 'td' ).on( 'dblclick', function() {
var pos = $( this ).position(),
x = pos.left, y = pos.top,
idCampo = $( this ).attr( 'id' ),
nomeCampo = idCampo.split( '-' )[0];
$( '.edit' ).css( {'top': y + 'px', 'left': x + 'px'} );
// Mostra il giusto campo in funzione della richiesta di editing
switch ( nomeCampo ) {
case 'argomento': $( '.edit select' ).show(); break;
case 'lingua':
$( '.edit input' ).val( $( this ).text() );
$( '.edit input' ).show();
break;
default:
$( '.edit textarea' ).text( $( this ).text() );
$( '.edit textarea' ).show();
}
$( '.edit' ).show();
$( '#annulla' ).click( function() {
chiudi();
});
$( '#salva' ).click( function() {
var contenuto = '';
switch ( nomeCampo ) {
case 'argomento': contenuto = $( '#argomento' ).val(); break;
case 'lingua': contenuto = $( '#lingua' ).val(); break;
default: contenuto = $( '#contenuto' ).val(); break;
}
$.ajax({
url: 'setupSchedaSito.php',
type: 'POST',
dataType: 'json',
data: {
id: idCampo.split( '-' )[1],
nomeCampo: nomeCampo,
contenuto: contenuto
},
success: function( json ) {},
complete: function(){
chiudi();
}
});
});
});
});
</script>
