Vediamo come creare dei campi “click to edit” (clicca per modificare) in maniera semplice grazie a Jeditable.
In questo articolo Davide ci spieghera’ come usare al meglio jEditable per migliorare la UX dei nostri progetti.
Uso della libreria
Mettiamoci al lavoro innanzitutto scaricate e importate nel vostro progetto la classica libreria jquery e ovviamente anche la libreria jeditable (scaricabile da qui http://www.appelsiini.net/projects/jeditable)
Ora ipotizziamo di avere questo testo che vogliamo rendere compilabile con un click:
<h2>Il sottoscritto</h2> …………………… <h2>in provincia di</h2> …………………… <h2>dichiara </h2> ……………………
Sara’ sufficiente modificare l’HTML in questo modo e inserire i campi che vogliamo rendere modificabili in un “div”.
<h2>Il sottoscritto</h2>
<div class="edit" id="nome"></div>
<div class="edit" id="cognome"></div>
<h2>in provincia di</h2>
<div class="editable_select" id="provincia"></div>
<h2>dichiara </h2>
<div class="editable_textarea" id="dichiara"></div>
Come potete vedere la “class” del “div” sara’ il tipo di campo che ci interessa usare mentre l’ “id” sara’ quello che verra’ passato al nostro file PHP. All’ interno del “div” invece mettiamo il testo che dovra’ comparire; lasciandolo vuoto si impostera’ un testo di default che dopo sceglieremo.
Per rendere modificabili con un click le caselle di input testo semplici bastera’ una riga di codice javascript ovvero:
$('.edit').editable('http://www.example.com/save.php');
Dove l’unico parametro da passare e’ l’url del file php che si occupera’ poi di salvare le modifiche. Al file PHP verranno semplicemente passate tramite POST 2 variabili:
-id: Il nome del campo che si sta modificando (ad esempio “nome”)
-value: Il valore che e’ stato impostato (ad esempio “Franco”).
Mentre come output il file PHP dovra’ restituire il valore impostato (ad esempio “Franco”).
Per fare un veloce test della libreria potete crearvi un file PHP con solamente una riga di echo che stampa la variabile POST value.
Adesso pero’ rendiamo modificabili anche le altre tipologie di “form” (oltre al semplice campo “input”,anche un campo “textarea” e una “select”) e aggiungiamo un po’ di opzioni.
Il codice javascript completo da inserire e’:
$(function() {
//Input
$('.edit').editable('http://192.168.28.1:888/jeditable/test.php', {
submit: 'OK',
onblur: 'submit',
placeholder: 'click per modifica...'
});
//Select
$(".editable_select").editable("http://192.168.28.1:888/jeditable/test.php", {
data: "{'Lorem ipsum':'Lorem ipsum','Ipsum dolor':'Ipsum dolor','Dolor sit':'Dolor sit'}",
type: "select",
submit: "OK",
style: "inherit",
onblur: 'submit',
placeholder: 'click per modifica...'
});
//Textarea
$(".editable_textarea").editable("http://192.168.28.1:888/jeditable/test.php", {
indicator: "<img src='img/indicator.gif'>",
type: 'textarea',
submit: 'OK',
cancel: 'cancel',
cssclass: "editable",
onblur: 'submit',
placeholder: 'click per modifica...'
});
});
Il codice e’ molto semplice; tutto e’ racchiuso nella funzione jquery “Document Ready”(l’ho scritta in versione abbreviata ma e’ equivalente a “$( document ).ready(function() {” ).
Il primo blocco di codice si riferisce alle semplici caselle di testo; il secondo blocco si riferisce a una select, il terzo blocco serve per creare una textarea.
Ecco le principali opzioni usate ed una loro breve descrizione:
–submit: Il nome del bottone per dare l’ ok e inviare i dati
– onblur: Quando clicco fuori dalla casella di testo indica se salvare o meno i dati
– placeholder: Il testo che sara’ visualizzato di default nei campi.
– data: I valori tra cui scegliere della select
– type: La tipologia di campo(appunto select)
– style: Se vogliamo assegnare dei CSS.
– indicator: Un testo o un immagine da visualizzare mentre vengono salvati i dati.
Per maggiori informazioni sulle opzioni vi consiglio di leggere la documentazione ufficiale(link che ho messo a inizio pagina).
Trick
Se volete impostare un “placeholder” specifico per ogni campo (Ad esempio inserisci nome, inserisci cognome,etc ); potete modificare cosi’ il codice(l’ esempio ve lo mostro sulla semplice casella di testo ma potete applicarlo a qualsiasi tipo):
//Input
$('.edit').each(function() {
var testop = $(this).attr('placeholder');
$(this).editable('http://192.168.28.1:888/jeditable/test.php', {
submit: 'OK',
onblur: 'submit',
placeholder: testop
});
});
In pratica ciclo tutti gli elementi con classe “edit”. Mi salvo in una variabile di appoggio(testop) il valore del placeholder(che sara’ passato come attributo) e poi lo imposto.
A questo punto abbiamo a disposizione il parametro placeholder usabile semplicemente cosi’:
<h2>Il sottoscritto</h2>
<div class="edit" id="nome" placeholder="Inserisci nome"></div>
<div class="edit" id="cognome" placeholder="Inserisci cognome"></div>
Questo articolo ti è stato utile? Condividilo!
Image credits “edit” disponibile su @Shutterstock
