“Hi! My name is Jeditable and I am inplace editor plugin for jQuery. With few lines of JavaScript code I allow you to click and edit the content of different xhtml elements.” Così si presenta questo efficace e davvero ben funzionante plugin per jQuery, che vi permette apunto con poche righe di codice di avere la possibilità di editare un testo in linea. Il Pluging, una volta istanziato il DIV contenente il testo, necessita di alcuni settaggi che potete leggere sul sito proprietario, mentre oggi vedremo come editare in linea e dunque salvare contenuti che provengono dinamicamente dal Data Base.
Prepariamo dunque la nostra pagina di estrazione e listening, includendo la connessione al nostro DB, includendo la libreria jQuery e il plugin jEditable; supponiamo di avere una tabella dal nome Video e volessimo mostrare in Loop tutti i titoli presenti nella stessa; potete estrarre i dati in PHP come meglio credete, dunque questa parte di codice è personale; nel mio caso il listening avviene così:

1
2
3
<?php do { ?>
  <div class="edit_text" id="<?php echo $row_estrai['id']; ?>"><?php echo $row_estrai['video_title']; ?></div>
<?php } while ($row_estrai = mysql_fetch_assoc($estrai)); ?>

Abbiamo un DIV classe “edit_text” che istanzia la parte del contenuto modificabile via plugin e un ID popolato dall’ID del Data Base appunto; questo permetterà di avere tanti Items differenti;
Vediamo ora la parte JS relativa al plugin:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(function() {
    $(".edit_text").editable("save_title.php", {
        indicator   : "<img src='indicator.gif'/>",
        submitdata  : { _method: "put" },
        select      : true,
        submit      : 'Update',
        cancel      : 'Cancel',
        //css
        cssclass    : "editable",
        width       : "10",
        //features
        loadtext    : 'Updating…',
        tooltip     : 'Click to edit...',    
    });
 
});

Il codice, se leggete le istruzioni del plugin sul sito proprietario sono davvero semplici; quello che ci interessa è la prima riga, dove indichiamo la pagina di back-end che riceverà i nostri parametri, eseguirà la Query e restituirà appunto il testo modificato e salvato nel nostro DB.
La pagina di back-end appunto, save_title.php non ha altro che questo codice:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//CONNECTION
    require_once('../Connections/tutorial.php');

//GET INFORMATIONs
    $id = $_POST['id'];
    $value = $_POST['value'];

    if($id && $value)
    {
        // UPDATE QUERY TO DATABASE
        $update = "update video set video_title='$value' where id='$id'";
        mysql_query( $update) or die(mysql_error());
    }
    echo $value;

Includiamo la connessione, istanziamo i dati editabili ed eseguiamo la query; facile no!
Scarica il tutorial sul repository di Beat Fly.