viernes, 10 de febrero de 2012

DatePicker y el camino del Ajax

¿Porque usaría ajax con este componente?
En el ejemplo anterior Datepicker + base de datos  se me presentó el problema de acceder a la variable $query de php desde javascript, me pareció que debía ser engorroso el tratar de hacer algún cambio al código cada vez que quiera añadir o modificar algo, por otra parte si requiriera que el componente actualizara los datos y al pertenecer este a un formulario no me gustaría que el usuario perdiera toda la información que ya ha llenado al hacer una actualización completa de la página. Pienso que es más óptimo volver a recargar una parte pequeña de mi aplicación que toda la página web. Ahorrar recursos es mi objetivo y todo depende de ¿para qué necesito Ajax?.

Bien retomando el ejemplo anterior, tenemos el controller, el modelo, y la vista esta última contiene código javascript que puede decirse está embebido en el de php, mi objetivo es separar este código y acceder a los datos de mi tabla historial, pero antes de esto necesitamos cambiar algo de código en el  controller.

dp.php
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<?php
class Dp extends CI_Controller {

    public function __construct() {

        parent::__construct();

        // cargamos nuestro base de datos ahora lo hacemos por defecto

        $this->load->database();

        $this->load->model('Historial_model');

    }

    public function index() {

        // en este caso queremos que la vista haga las peticiones no el controller

        // cargamos nuestra vista

        $this->load->view('dp_view');

    }

    public function datos_dp(){

         // obtenemos los datos de la tabla y lo guardamos en la variable

        // datos

        $datos['query'] = $this->Historial_model->get_datos();

        // codificamos el array a json usando json_encode mirar manual de php

       // no uso xml porque  json está soportado nativamente en javascript

      // entonces creo no se deberia llamar Ajax sino Ajaj por json jejeje?

        $data_json = json_encode($datos);

        // enviamos el json a la vista

        echo $data_json;

       

    }



La función datos_dp tiene como objetivo obtener los datos de la tabla historial y convertirlos en formato json(texto) para enviarlo por medio de un echo al cliente (dp_view.php).
Aquí esta el contenido de ese envio en json, usamos la misma tabla historial del ejemplo anterior:

{"query":[{"id":"1","fecha":"01\/12\/2010"},{"id":"2","fecha":"02\/09\/2012"}]}


json_encode($datos) Convierte el contenido de $datos['query'] a formato json texto,  para mantener la estructura y el significado de los datos, la alternativa sería crear nuestro propio formato que represente la estructura de los datos y la tabla historial, pero para que inventar de nuevo la rueda.


Nuestra vista contiene 3 cambios importantes primero quité el código php y segundo incluí  <script type="text/javascript" src="../js/dp.js"></script> que representa la ruta de mi javascript que lo he trasladado todo al archivo dp.js y controla la parte lógica del cliente, lo que nos permitirá enviar peticiones ajax a nuestro server en este caso a mi función datos_dp, y la parte <script language="JavaScript" type="text/javascript" src="../js/jquery.json-2.3.min.js"></script> carga  la librería necesaria para poder convertir de texto json a un objeto json en javascript por medio de $.evalJSON(), aunque tambien jquery posee esta habilidad por medio de la función $.getJSON, prefiero usar la librería ya que posee métodos que necesitaremos más adelante para otros proyectos, analizaré posteriormente si incluirla o no.

dp_view.php
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!doctype html>

<html lang="es">

    <head>

        <link type="text/css" href="../js/css/smoothness/jquery-ui-1.8.17.custom.css" rel="stylesheet" />

        <script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>

        <script type="text/javascript" src="../js/jquery-ui-1.8.17.custom.min.js"></script>

        <script language="JavaScript" type="text/javascript" src="../js/jquery.json-2.3.min.js"></script>

        <script type="text/javascript" src="../js/dp.js"></script>

    </head>

    <body>

    <div>

    <input id="datepicker" type="text">

    </div>

    </body>

</html>

A continuación tenemos nuestro javascript  el cual contiene prácticamente el mismo código excepto la función $.ajax y var historial = $.evalJSON(msg), la función evalJSON hace el proceso inverso a jsonencode de php, lo que hace es convertir el texto recibido en formato json a un objeto json de javascript.

dp.js
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
jQuery(document).ready(function(){

    //creamos el datepicker

    $("#datepicker").datepicker({

        dateFormat: "dd/mm/yy"

    });

// llamamos por ajax a la función datos_dp

    $.ajax({

        type: "POST",

        url: "dp/datos_dp",

        success: function(msg){

           // se convierte de json a un objeto javascript

           var historial = $.evalJSON(msg);

           //observar con firebug la estructura del objeto

           $('#datepicker').datepicker('setDate', historial.query[0].fecha);

        }

    });

});// fin de ready function

El resultado:

Se puede observar una mejor estructuración del código, desde mi punto de vista es más elegante y fácil de mantener.


Publicado por en

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)