<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>TolerantX&#039;s Blog &#187; Guardar</title>
	<atom:link href="http://tolerantx.com/tag/guardar/feed/" rel="self" type="application/rss+xml" />
	<link>http://tolerantx.com</link>
	<description>Y sin embargo se mueve</description>
	<lastBuildDate>Sat, 21 Aug 2010 04:11:26 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>Enviar formulario sin recargar la página con Zend Framework y JQuery.</title>
		<link>http://tolerantx.com/2010/03/02/enviar-formulario-sin-recargar-la-pagina-con-zend-framework-y-jquery/</link>
		<comments>http://tolerantx.com/2010/03/02/enviar-formulario-sin-recargar-la-pagina-con-zend-framework-y-jquery/#comments</comments>
		<pubDate>Tue, 02 Mar 2010 21:57:33 +0000</pubDate>
		<dc:creator>TolerantX</dc:creator>
				<category><![CDATA[MySQL]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[Zend Framework]]></category>
		<category><![CDATA[Ajax]]></category>
		<category><![CDATA[Guardar]]></category>

		<guid isPermaLink="false">http://tolerantx.com/?p=163</guid>
		<description><![CDATA[Cuando se están manejando formularios con PHP guardando los datos en algún gestor de base de datos como MySQL llega a surgir la duda de cómo guardar dichos datos utilizando Ajax (JQuery en éste caso) para evitarnos el refresco de pantalla y poder seguir haciendo uso del sistema sin este pequeño (o grande) retraso. Primero [...]]]></description>
			<content:encoded><![CDATA[<p>Cuando se están manejando formularios con PHP guardando los datos en algún gestor de base de datos como MySQL llega a surgir la duda de cómo guardar dichos datos utilizando Ajax (JQuery en éste caso) para evitarnos el refresco de pantalla y poder seguir haciendo uso del sistema sin este pequeño (o grande) retraso.</p>
<p>Primero que nada utilizaré Zend Framework, JQuery y MySQL como gestor de base de datos. Para éste ejemplo empezaremos creando una base de datos sencilla llamada clientes donde única y exclusivamente guardaremos el nombre (para no hacer tan extenso ésto).<span id="more-163"></span></p>
<p>Muy bien para crear nuestra tabla primeramente debemos tener creada la base de datos, puedes utilizar phpmyadmin o la línea de comandos, como más te agrade, de todas maneras adjunto el código de la creación de la base de datos como también de la tabla.</p>
<pre name="code" class="sql">CREATE DATABASE `prueba`;

CREATE TABLE `prueba`.`clientes` (
  `id_cliente` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
  `cliente` VARCHAR( 100 ) NOT NULL
) ENGINE = InnoDB CHARACTER SET utf8 COLLATE utf8_unicode_ci;
</pre>
<p>Si te fijas la base de datos la llamé prueba y la tabla la llamé cliente con dos campos, id_cliente y cliente.<br />
No entraré en detalles en creación de controladores, modulos, vistas, en nuestro árbol de directorios de Zend Framework.</p>
<p>Creo el módulo (application/models/Clientes.php) con un método llamado getClientes, éste método nos devolverá posteriormente los clientes guardados en la base de datos:</p>
<pre name="code" class="php">&lt;?php

class Clientes extends Zend_Db_Table
{
    protected $_name = 'clientes';

    public function getClientes()
    {
        $c = new Clientes();
        $c_select = $c-&gt;select()-&gt;order('cliente');

        return $c-&gt;fetchAll($c_select);
    } // end getClientes

}
</pre>
<p>El controlador lo llamaré Clientes así que queda de la siguiente manera (application/controllers/ClientesController.php):</p>
<pre name="code" class="php">&lt;?php

class ClientesController extends Zend_Controller_Action
{

    public function init()
    {
        $this-&gt;initView();
        $this-&gt;view-&gt;baseUrl = $this-&gt;_request-&gt;getBaseUrl();
    }

    public function indexAction()
    {
        Zend_Loader::loadClass('Clientes');
        $c = new Clientes();
        $this-&gt;view-&gt;clientes = $c-&gt;getClientes();

    } // end indexAction()

}

?&gt;
</pre>
<p>El método init nos arroja la variable baseUrl, la cual utilizaremos para la llamada de archivos en nuestra vista, como también tiene la acción index y hace una consulta a nuestra base de datos clientes (getClientes) como lo mencionamos anteriormente y dicha consulta la podremos ver en nuestra vista.</p>
<p>Aquí quedaría nuestra vista (application/views/scripts/clientes/index.phtml):</p>
<pre name="code" class="xhtml">&lt;script type="text/javascript" language="javascript" src="&lt;?php echo $this-&gt;baseUrl;?&gt;/public/scripts/jquery.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" language="javascript" src="&lt;?php echo $this-&gt;baseUrl;?&gt;/public/scripts/guardarCliente.js"&gt;&lt;/script&gt;
&lt;form action="" name="form1" id="form1" method="post"&gt;
    &lt;label&gt;Cliente: &lt;/label&gt;&lt;div id="div_cliente"&gt;
        &lt;select name="cliente" id="cliente"&gt;
            &lt;?php foreach ($this-&gt;clientes as $cliente) : ?&gt;
            &lt;option value="&lt;?php echo $cliente-&gt;id_cliente; ?&gt;"&gt;&lt;?php echo $cliente-&gt;cliente; ?&gt;&lt;/option&gt;
            &lt;?php endforeach; ?&gt;
        &lt;/select&gt;
    &lt;/div&gt;
&lt;/form&gt;

&lt;div id="form_ajax"&gt;
    &lt;form name="guardar_cliente"&gt;
        &lt;p&gt;Cliente:&lt;/p&gt;
        &lt;input type="text" name="nombre_cliente" id="nombre_cliente" value="" /&gt;
        &lt;input type="submit" name="submit" value="Guardar" id="guardarCliente" /&gt;
    &lt;/form&gt;
&lt;/div&gt;
</pre>
<p>En el código anterior hemos agregado la libreria de JQuery que la puedes descargar de Aquí y además el archivo agregarCliente que se encargará de hacer la petición AJAX del guardado del cliente. Este archivo quedaría como lo siguiente (public/scripts/agregarCliente.js):</p>
<pre name="code" class="javascript">$(function() {

    // bloqueamos la tecla enter para que no recargue la página
    $('#form_ajax').bind('keypress', function(e) {
        if (e.keyCode == 13) return false;
    });

    $('#guardarCliente').click(function() {

        var nombre_cliente = $('#nombre_cliente').val();
        var baseUrl = '/prueba';
        var dataString = 'nombre_cliente=' + nombre_cliente;

        $.ajax(
        {
            async: true,
            dataType: 'html',
            type: 'POST',
            contentType: 'application/x-www-form-urlencoded',
            url: baseUrl + '/clientes/guardar-cliente/',
            data: dataString,
            beforeSend: function(data){
                    $('#div_cliente').html('&lt;label&gt;Cargando...&lt;/label&gt;');
            },
            success: function(requestData){
                    $('#div_cliente').html(requestData);
            },
            error: function(requestData, strError, strTipoError){
                    alert('Error ' + strTipoError +': ' + strError);
            },
            complete: function(requestData, exito){
            }
        });

        $('#nombre_cliente').val('');
        return false;
    });
});
</pre>
<p>Ten en cuenta el atributo url de $.ajax ( url: baseUrl + &#8216;/clientes/guardar-cliente/&#8217;) ya que es en donde se ejecuta el script del lado del servidor (PHP) que guardará finalmente nuestro cliente.<br />
La variable baseUrl de nuestro archivo javascript igualmente hace referencia al directorio en el que se encuentra nuestro sistema dentro de nuestro servidor web.</p>
<p>Por último volvemos a modificar nuestro controlador, agregando la acción guardar-cliente y nuestro archivo application/controllers/ClientesController.php será el siguiente:</p>
<pre name="code" class="php">&lt;?php

class ClientesController extends Zend_Controller_Action
{

    public function init()
    {
        $this-&gt;initView();
        $this-&gt;view-&gt;baseUrl = $this-&gt;_request-&gt;getBaseUrl();
    }

    public function indexAction()
    {
        Zend_Loader::loadClass('Clientes');
        $c = new Clientes();
        $this-&gt;view-&gt;clientes = $c-&gt;getClientes();

    } // end indexAction()

    public function guardarClienteAction()
    {
    if ($this-&gt;getRequest()-&gt;isXmlHttpRequest()) { //Detectamos si es una llamada AJAX

        $this-&gt;_helper-&gt;viewRenderer-&gt;setNoRender();
        Zend_Loader::loadClass('Clientes');
        $c = new Clientes();

        // agregamos el estado
        $cliente = $this-&gt;_request-&gt;getPost('nombre_cliente');

        $cliente_data = array ('cliente' =&gt; $cliente);
        $c-&gt;insert($cliente_data);

        // consulta de la nueva lista de clientes
        $clientes = $c-&gt;getClientes();
        if (count($clientes) &gt; 0) {

            echo '&lt;select name="cliente" id="clienteo"&gt;';
            foreach($clientes as $cl):
                $selected = '';
                if ($cl-&gt;cliente == $cliente) { $selected = 'selected="selected"'; }
                echo '&lt;option value="'.$cl-&gt;id_cliente.'" '.$selected.'&gt;'.$cl-&gt;cliente.'&lt;/option&gt;';
            endforeach;
            echo '&lt;/select&gt;';

        } // end if (count($clientes) &gt; 0)

     } // end if ($this-&gt;getRequest()-&gt;isXmlHttpRequest())

    } // end guardarClienteAction

}

?&gt;
</pre>
<p>Y listo ya tienes tu modulo clientes el cual te lista los clientes ya existentes y desde la misma página podrás agregar más sin necesidad de recargar la página como lo hace un formulario normal.</p>
<p>Cabe destacar que yo lo realicé con el Zend Framework, pero si se analiza el código es bastante simple y puede aplicarse sin éste, pero eso ya les toca a ustedes hacerlo.</p>
<p>Cualquier aportación o comentario serán bien recibidos <img src='http://tolerantx.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
]]></content:encoded>
			<wfw:commentRss>http://tolerantx.com/2010/03/02/enviar-formulario-sin-recargar-la-pagina-con-zend-framework-y-jquery/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
