Actualización de formularios con JQuery y Ajax sobre CodeIgniter

En este artículo te mostraré cómo actualizar el contenido de un formulario o una vista en general, usando Jquery y luego un ejemplo donde se consulta con Ajax la BD para recargar un componente visual.

Para “rellenar” el contenido de una parte de la vista luego de que esta ha sido cargada (por ejemplo cuando se dé clic en algún lado, cuando se haga una consulta, etc.), puedes usar la propiedad “html” de los componentes. Puedes poner en tu vista algún lugar “vacío” para llenarlo luego… en ese lugar pondrías:

<div id="my_area"></div>

Y entonces en código script:

<script type="text/javascript">
    $("#my_area").html("contenido del área");
</script>

Donde el “contenido del área” puede ser una cadena como esa misma que puse entre comillas, o cualquier contenido web como una tabla, una imagen, etc.

Usando esto entonces se pueden hacer consultas a la base de datos desde la vista, sin tener que ir a la función controller_name/function/parameters_get, y por tanto no recargarías toda la página sino el segmento que vas a refrescar. El código para hacer un post desde la vista es:

<script type="text/javascript">

    //ejemplo con variable por get y ninguna por post
    var value_name = 'Mary';
    $.post('<?php echo site_url()?>controller_name/example_1/'+value_name, 
{}, 
function(data){      
            	$('#my_area').html(data);            
    });

    //ejemplo con variables por post y ninguna por get
    var value_name = 'Mary';
    var value_age = 20;
    $.post('<?php echo site_url()?>controller_name/example_2', 
{'name': value_name, 'age': value_age }, 
function(data){      
            	$('#my_area').html(data);            
    });

</script>

En el primer ejemplo llamo una función de un controlador que no espera variables por post, en el segundo estoy pasando dos variables que se recogerían en el controlador con “input”, como si estuvieras recibiendo directamente un formulario. Si realmente quieres recibir los valores de un formulario entonces puedes acceder al valor de un componente de la siguiente manera:

var value_name = $("#text_name").val(); //dentro de <script>

Es importante que el nombre, en este caso “text_name”, lo pongas como id del componente. Si el valor no te está llegando es lo primero que debes revisar. Otra cosa es que los componentes no tienen que estar necesariamente dentro de un formulario, a jquery no le importa eso. Lo pones en un formulario si quisieras hacer además el submit tradicional.

La función que hace el post retorna un “data” (esta variable puede tener cualquier nombre) que es el que se renderea dentro del área “my_area” en formato html. Para esto al final de la función del controlador debes hacer un “echo”. Para el ejemplo anterior podría ser algo así:

function example_1 ($name)
{
    echo 'El nombre es: '.$name;
}

function example_2 ()
{
    $name = $this->input->post('name');
    $age = $this->input->post('age');

    echo 'El nombre es: '.$name.' y la edad es: '.$age;
}

Como ves es bastante sencillo y sumamente útil. Por ejemplo puedes hacer que cuando se seleccione una opción en un combobox se rellene el contenido de otro combobox, por ejemplo que al seleccionar un estado de un país en un combo, en el siguiente salgan los municipios correspondientes. Para esto en el “onchange” del primer combo capturas su valor, haces un post con Ajax pasando este valor al controlador, en el controlador obtienes los municipios correspondientes de la base de datos, construyes un combobox en código html y lo retornas como data, que luego pondrías en el lugar del segundo combobox.

Es todo, espero te haya sido de utilidad.