<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Home</title>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<form id="logForm">
<label>Utente:</label>
<input name="utente" type="text" id="utente"><br>
<label>Data servizio:</label>
<input type="date" name="dt_servizio" id="dt_servizio"><br>
<label>Turno:</label>
<select name="turno" id="turno">
<option value="0" selected>Seleziona</option>
<option value="mattina">Mattina</option>
<option value="pomeriggio">Pomeriggio</option>
<option value="sera">Sera</option>
<option value="notte">Notte</option>
</select><br>
<label>Nota:</label>
<input name="nota" type="text" id="nota"><br>
<input type="submit" value="Salva">
</form>
<!--<div id="ris_nome" class="box"></div>
<div id="ris_email" class="box"></div>
<div id="ris_note" class="box"></div>-->
<ul id="listaDati">
</ul>
<div id="okk">
</div>
<!-- SCRIPT JS -->
<script type="text/javascript">
$(document).ready(function() {
visualizza()
$("#logForm").submit(function(){
var newDate = new Date();
var itemId = newDate.getTime();
var values = new Array();
var utente = $("input[name='utente']").val();
var dt_servizio = $("input[name='dt_servizio']").val();
var turno = $("select[name='turno']").val();
var nota = $("input[name='nota']").val();
values.push(utente);
values.push(dt_servizio);
values.push(turno);
values.push(nota);
if (utente == "" || dt_servizio == "" || turno == "" || nota == "") {
alert('Compilare tutti i campi');
} else {
try {
localStorage.setItem(itemId, values.join(';'));
//alert('Dati Salvati');
} catch (e) {
if (e == QUOTA_EXCEEDED_ERR) {
alert('Quota localStorage superata!');
}
}
visualizza()
}
// Aggiunto return false; per non far aggiorare la pagina una volta salvato il nuovo 'record'
return false;
});
});
////////////////////////////////////////////////////////////////////////////////////////////////
function visualizza() {
var tuttiDati = "";
var i = 0;
var logLength = localStorage.length-1;
for (i = 0; i <= logLength; i++) {
var itemKey = localStorage.key(i);
//values sarebbe l'array che contiene tutti i dati
var values = localStorage.getItem(itemKey);
values = values.split(";");
var utente = values[0];
var dt_servizio = values[1];
var turno = values[2];
var nota = values[3];
// Al posto di 'id' come attributo ho messo 'class' perché senno andava in conflitto con
// le altre righe che generavi dopo!
// Inoltre ho aggiunto l'attributo onclick sul bottone per eliminare il 'record' perché sennò
// quando andava a creare la nuova riga, la funzione $('.bottone').click( ecc... ) non veniva riconosciuta
// in quanto viene generata dopo che la pagina è stata caricata! infatti $(document).ready(function(){ ecc.. });
// l'ho tolto in quanto dopo il bottone non veniva più riconosciuto/trovato e l'evento del click non veniva eseguito!
tuttiDati += '<li>'+ '<form action="#" method="post" class="dati_sincro">'
+ '<input name="id_key" type="text" readonly class="id_key" value="'+ itemKey +'">' + ' - '
+ '<input name="utente" type="text" readonly class="utente" value="'+ utente +'">' + ' - '
+ '<input name="dt_servizio" type="text" readonly class="dt_servizio" value="'+ dt_servizio +'">' + ' - '
+ '<input name="turno" type="text" readonly class="turno" value="'+ turno +'">' + ' - '
+ '<input name="nota" type="text" readonly class="nota" value="'+ nota +'">' + ' - '
+ '<input type="button" class="bottone" value="Salva" onclick="elimina(this)">'
+'</li>'+'</form>';
}
$("#listaDati").html(tuttiDati);
}
function elimina(elemento){
var dati = $(elemento).parent(".dati_sincro").serialize();
//invio
$.ajax({
type: "POST",
url: "salva.php",
data: dati,
dataType: "html",
success: function(msg)
{
$("#okk").html(msg);
// Qua prendo l'id del 'record'.
var id = $(elemento).siblings(".id_key").val();
localStorage.removeItem(id);
// richiamo la funzione per 'aggiornare' l'html della pagina
visualizza();
alert('eliminato');
},
error: function()
{
alert("Chiamata fallita, riprovare...");
}
});//ajax
}
</script>
</body>
</html>
