jQuery, AJAX e CodeIgniter

Oggi vedremo come è possibile sfruttare AJAX attraverso jQuery in applicazioni scritte con il framework CodeIgniter.

Il primo step è sempre quello di includere la libreria jQuery nell'head della pagina:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

Dopo di che nella view ho un link, che al click attiva una funzione Javascript per la chiamata AJAX:

<a href="javascript:dtlArticolo('<?php echo $var->articolo_codice; ?>');" ><?php echo $var->articolo_codice; ?></a>

<script type="text/javascript">
    function dtlArticolo(articolo) {
        $.ajax({
            url: "<?php echo base_url('ajax/getdtlarticolo/'); ?>/" + articolo,
            type: 'POST',
            dataType: 'html',
            success: function(response) {
                $("#dtl_articolo").html(response);
            },
            error: function() {
                $("#dtl_articolo").html('ERRORE');
            }
        });
    }
</script>

In genere in CI si usano la funzione anchor() per creare link, e anche io in effetti la uso sempre.

Questo è l'unico caso in cui non la uso perchè trovo più intuitivo fare alla maniera "classica" in questo specifico caso.

Come vedete la funzione l'ho messa nella view, e questo perchè l'url glielo passo attraverso PHP e la funzione di CI base_url().

Ricordate che di default CI non usa i classici parametri GET, e quindi in questo non avremo potuto costruire l'url come siamo abiautati a fare:

url: 'pagina.php',

data: 'id=3&cm=7'

Non so se mi sono spiegato, ma penso di si visto che prima di arrivare a usare AJAX avrete di sicuro studiato un pò il framework e capito come funzionano i link e i parametri.

A questo punto dobbiamo creare un controller apposito; il controller eseguirà la query e spedirà i dati in formato HMTL:

<?php

class Ajax extends CI_Controller {

    public function getDtlArticolo() {
        $this->db->select('*');
        $this->db->from('cr_articoli');
        $this->db->where('articolo_codice', $this->uri->segment(3));
        $this->db->group_by('articolo_codice');
        $query = $this->db->get();
        $outputString = '';
        $outputString .= '<div class="dtl_ajax">';
        foreach ($query->result() as $row) {
            $outputString .= '<div class="dtl_articolo"><p>';
            $outputString .= '<span>CODICE: </span>' . $row->articolo_codice . '<br/>';
            $outputString .= '</p></div><div class="dtl_img">';
            $outputString .= img(array(
                'src' => '../IMMAGINI/' . $row->articolo_codice,
                'alt' => $row->articolo_codice
                    ));
            $outputString .= '</div>';
        }
        $outputString .= '</div>';
        echo $outputString;
    }

}

Anche qui un appunto: in genere è il model ad eseguire la query, non il controller.

In questo caso però ho riscontrato qualche problema, e quindi per smeplicità ho messo la query qua dentro.

Come vedete mi costruisco tutto l'output, con due div (che nel CSS sono affiancati); in quello di sinistra stampo il valore preso dal db; in quello di destra ci visualizzo l'immagine usando la funzione img() di CI.

Guardatevi i link alle funzioni per maggiori informazioni.

Ciao!!