Come tutti saprete, la possibilità di inserire delle informazioni all’interno di un Data Base è possibile con qualunque linguaggio dinamico, ma le operazioni richiedono comunque un refresh di pagina; quallo che oggi vedremo è come ottenere lo stesso risultato senza un reload di pagina utilizzando AJAX e sfruttando jQuery per fare un semplice “append HTML” del risultato nella stessa.
Poichè in rete esistono moltissimi tutorial del genere, il mio intervento non ha nulla di speciale nella scrittura del codice, ma vuole semplificare al massimo le basilari procedure per inserire uno o più campi di un Form all’interno di una base dati MySql, mostrando come sia semplice recuperare i valori dei campi, applicarvi una semplice validazione e dunque mostrarli nella stessa pagina dopo il Submit.
In questo tutorial costruiremo una video gallery recuperando i nostri brani preferiti da YouTube, sfrutteremo la codifica oEmbed per trasformare il semplice Link di YouTube in un Video e due chiamate AJAX per inserire il valore del Form nel Db ed eliminare lo stesso in modalità Live.

Il pacchetto conterrà i seguaenti file:

  • jquery_example_insert_delete.php come default per l’inserimento, cancellazione e listening dei records
  • insert.php per l’inserimento via AJAX
  • delete.php per la cancellazione via AJAX
  • video.sql per la creazione della tabella MySql
  • la cartella js per i file JavaScript
  • la cartella images per i file grafici e la cartella
  • style per lo stile CSS

La pagina di base mostra un Form per l’inserimento posto subito prima della lista dei Video composto da due campi: Titolo e Link;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="wrap clearfix">
        <h2>Insert a Video <span id="success" style="display: none;">OK!</span></h2>
        <form id="submit" method="post">
        <div class="pad">
            <div class="row">
                <label for="fname">Video Title:</label>
                <input id="video_title" name="video_title" type="text"/>
                <span class="error"> This field cannot be blank</span>
            </div>
           
            <div class="row">
                <label for="video_link">Video Link:</label>
                <input id="video_link" name="video_link" type="text"/>
                <span class="error"> This field cannot be blank</span>
            </div>
           
            <button class="submit button">ADD</button>
           
            <div class="row">
                <span id="loading"></span>
            </div>
        </div><!--/.pad-->
        </form>
    </div><!--/#wrap-->

Come potete vedere il Form contiene due “span” class error che verranno mostrati nel caso si tenti di inviare il Form senza aver compilato i campi, (regole inserite nel file js/validation.js)
Nella stessa pagina abbiamo dunque le due sezioni di codice jQuery che ci interessano per eseguire un Insert e una Delete di dati; iniziamo con la sezione Insert:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
    //insert record
        $("form#submit").submit(function() {
            // we want to store the values from the form input box, then send via ajax below
            var video_title     = $('#video_title').attr('value');
            var video_link      = $('#video_link').attr('value');
                $.ajax({
                    type: "POST",
                    url: "insert.php",
                    data: "video_title="+ video_title +"& video_link="+ video_link,
                    cache: false,
                    success: function(){
                        $('#loading').show(); //show loader
                        $('#video_title, #video_link').val(""); //clear input fields
                       
                        $("#success").fadeIn('slow');
                       
                        $("ul#gallery").prepend("<li style='display:none'>"+video_title+"</li>");//add the posted items to page
                        $("ul#gallery li:first").fadeIn();
                        $('#loading').hide(); //hide loader
                    }
                });
            return false;
        });

Vedete come i due valori del Form siamo istanziati e dunque recuperati per essere inviati in POST alla pagina “insert.php” la quale recupera i valori e li inserisce nel DB; nella pagina non sono stati inseriti di proposito validazioni lato Server per lasciare il più chiara possibile la procedura di inserimento.
Il secondo codice è quello della cancellazione:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
    //delete record
        $('.delete_update').live("click",function(){
                                                         
                var ID = $(this).attr("id");
                var dataString = 'id='+ ID;
               
                if(confirm("Do you want to delete this Video?"))
                {
               
                $.ajax({
                    type: "POST",
                    url: "delete.php",
                    data: dataString,
                    cache: false,
                    success: function(html){
                        $(".list"+ID).fadeOut('slow', function() {$(this).remove();});
                    }
                    });
                }
               
            return false;
        });

Il frammento di codice è molto espilcativo; una volta eseguita l’estrazione dei Records dal Db recuperiamo l’ID di ogni record e grazie a quello, sul link class “delete_update” eseguiamo una cancellazione dinamica. Anche qui la pagina “delete.php” recupera i dati passati in POST ed esegue la delete nel Db.
Spero di aver chiarito e semplificato alcuni tutorial interessanti che si trovano in rete, magari però poco esplicativi e semplici per quanto riguarda l’inserimento e la cancellazione di Record utilizzando jQuery e AJAX.
Trovate il pacchetto completo nella sezione Download del sito BeatFly.com