Prototypejs – events

En este post mostraré como modificar las cabeceras de APACHE con PHP usando las herramientas CodeIgniter y PrototypeJS para crear errores de servidor al vuelo y recogerlos con
Ajax.Request(); para hacer uso de los eventos que ofrece. En este ejemplo usaré 3 de ellos…

onLoading: Para alterar el dom con un texto mientras responde el server

onFailure: Para recoger el error y mostrarlo alterando el dom del html

onSuccess: Para mostrar la respuesta *correcta* que esperamos del server.

Controlador:

class Controlador extends Controller{
    function ejemplo ()
    {
       $param['dato'] = $this->input->post('dato', TRUE);
        // suponiendo que hay dos variables que a huevo deben
        // coincidir para llegar al siguiente proceso
        // si las variables son iguales, entonces muestra la vista
        if ($param['dato'] == 1)
        {
            $this->load->view('opciones');
            // en caso contrario, invoca a la función privada _get500();
        } else {
            $this->_get500();
        }
    }

    // Escribe el "Response status" de respuesta para AJAX.onFailure
    function _get500()
    {
        header("HTTP/1.0 500 Hubo una madre que fallo, por lo pronto no jala.");
    }
}

Ahora, este es el archivito.js que manda llamar el controlador.

function get500()
{
     var url = base_url;
    var $_C = 'controlador/ejemplo';
    url += $_C;
    var notice = $('notifications');
    new Ajax.Request(url, {
      method: 'post',
      {
      parameters: {dato: $F('dato')}
      }

      onLoading: function(transport){
          notice.update('CARGANDO ESTA CHINGADERA').setStyle({ background: '#dfd' });
      },

      onFailure: function(transport) {
          notice.update(transport.statusText).setStyle({ background: '#dfd' });
      },

      onSuccess: function (transport){
          notice.update(transport.responseText).setStyle({ background: '#dfd' });
      }
    });
    new Effect.Appear('notifications');

}

Ahora, la vista donde se observaran los efectos del código


SociBook del.icio.us Digg Facebook Google Yahoo Buzz StumbleUpon

1 Comment »

 
  1. aquilesbaeza says:

    Muy bueno el post y esta fregon el codigo… le da un “plus” los comentarios tan… pintorescos XD

 

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>