Oct 272012
 

Costruiamo un sistema per aggiornare il database tramite checkbox, senza ricaricare la pagina utilizzando chiamate ajax.

Per prima cosa il form:


<form>
<input type=”checkbox” id=”u1″ name=”u1″  /><label id=”l1″>Utente 1</label><br />
</form>

con tutte le checkbox di cui abbiamo bisogno. E’ importante fare in mdo che l’id e il name dei nostri checkbox siano legati all’id del record da aggiornare, in questo caso lo contengono insieme a un prefisso “u” poiché non si può assegnare agli id dei valori solo numerici. All’interno del form inseriamo anche un div che nasconderemo con il css per mostrare l’immaghine del loader ajax e avvisare l’utente che l’operazione è in corso e un dialog box che useremo per dare la risposta circa l’esito dell’operazione:


<div id=”loader”><img src=”images/ajax_loader.gif” /></div>
<div id=”dialog” title=”Risposta del server:”><p></p></div>

Nel css prevediamo due class per evidenziare in kodo diverso gli utenti abilitati e quelli non abilitati e nascondiamo ciò che non serve subito.


<style type=”text/css”>
.abilitato{ color:#003366;}
.disabilitato{ color:#666;}
#msg, #dialog, #loader{ display:none;}
</style>

Passiamo ora alla parte jQuery:

predisponiamo la visualizzazione del loader:


$(document)
.ajaxStart(function(){$(‘#loader’).css({‘display’:'block’});})
.ajaxStop(function(){$(‘#loader’).css({‘display’:'none’});});

al caricamento della pagina mappiamo l’evento click solo sui checkbox:


$(‘:checkbox’).bind(‘click’,function(){

e leggiamo l’id e il valore dell’attributo checked, oltre a ri cavare l’id “vero” del record:


var ctr=this.id;
var chk=$(‘#’+ctr).attr(‘checked’);
var id=ctr.substr(1);

inseriamo la chiamata ajax:


$.ajax({
type:’GET’,
url:’checkbox.php?azione=aggiorna_utenti&id=’+id+’&chk=’+chk,
success:function(chk){

e vediamo ora brevemente la pagina php che sarà un normale update sul db:


error_reporting(0);
include(‘include/mysql.inc.php’);


if($_GET['azione']==’aggiorna_utenti’){
$id=(int)$_GET['id'];
$chk=$_GET['chk'];
if($chk==’checked’){$chk=1;}
else{$chk=0;}
$sql=’update utenti set abil=”‘.$chk.’” where id=’.$id;
$result=mysql_query($sql,$conn);
if(!$result){echo -1;}
else{echo $chk;}
}

con 3 possibili output: -1 in caso di errore, 0 se l’utente è disabilitato e 1 se è abilitato.

Ora andiamo a gestire le risposte:


if(chk==1){
$(‘#l’+id).removeClass(‘disabilitato’).addClass(‘abilitato’);
$(‘#dialog’).dialog();
$(‘#dialog p’).html(‘Operazione completata’);
}

e quindi modifichiamo la classe sulla label per segnalre il cambio di stato e mostriamo il dilog di jQuery UI per avvertire l’utente che l’operazione è conclusa. Ripetiamo e personalizziamo l’operazione anche per le altre due risposte.

L’esempio completo

Sorry, the comment form is closed at this time.