Punksolid » Scriptaculous http://www.punksolid.com Tecnologia, Curiosidades, Sistemas de Informacion y un poco de Religion Thu, 18 Aug 2011 13:06:55 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Autocompletar con scriptaculous http://www.punksolid.com/autocompletar-con-scriptaculous/2011/ http://www.punksolid.com/autocompletar-con-scriptaculous/2011/#comments Tue, 16 Aug 2011 14:08:23 +0000 Punksolid http://www.punksolid.com/?p=671 Lo que vamos a hacer es un cuadro search box como el google suggest, que a diferencia de este, no haremos una petición ajax al servidor ya que tendremos los valores precargados en una variable javascript, útil cuando los registros son pocos y estáticos.
Reconozco que a estas alturas medio mundo usa jquery, pero como persona de escaso conocimiento en el área, para el propósito me sirvió prototype y scriptaculous.

Lo primero que tenemos que hacer es descargar scriptaculous, y extraemos todos los js dentro de una carpeta javascripts.

El siguiente paso es crear el archivo css.css para darle un diseño bonito al recuadro de opciones que aparecerán conforme vayamos escribiendo, el código de css.css es

 

div.autocomplete {
  margin:0px;
  padding:0px;
  width:250px;
  background:#fff;
  border:1px solid #888;
  position:absolute;
}
 
div.autocomplete ul {
  margin:0px;
  padding:0px;
  list-style-type:none;
}
 
div.autocomplete ul li.selected {
  background-color:#ffb;
}
 
div.autocomplete ul li {
  margin:0;
  padding:2px;
  height:32px;
  display:block;
  list-style-type:none;
  cursor:pointer;
}

El tercer paso es crear el archivo autocompletar.html donde incluiremos los javascripts de prototype y scriptaculous, automáticamente se incluirán todas las dependencias.

 

<script type="text/javascript" src="javascripts/prototype.js"></script>
<script type="text/javascript" src="javascripts/scriptaculous.js?load=effects,controls">
</script>
<script type="text/javascript">
var bandsList = [
  'ABBA',
  'AC/DC',
  'Aerosmith',
  'America',
  'Bay City Rollers',
  'Black Sabbath',
  'Boston',
  'David Bowie',
  'Can',
  'The Carpenters',
  'Crass',
  'Deep Purple',
  'The Doobie Brothers',
  'Eagles',
  'Fleetwood Mac',
  'Haciendo Punto en Otro Son',
  'Heart',
  'Iggy Pop and the Stooges',
  'Journey',
  'Judas Priest',
  'KC and the Sunshine Band',
  'Kiss',
  'Kraftwerk',
  'Led Zeppelin',
  'Lindisfarne (band)',
  'Lipps, Inc',
  'Lynyrd Skynyrd',
  'Pink Floyd',
  'Queen',
  'Ramones',
  'REO Speedwagon',
  'Rhythm Heritage',
  'Rush',
  'Sex Pistols',
  'Slade',
  'Steely Dan',
  'Stillwater',
  'Styx',
  'Supertramp',
  'Sweet',
  'Three Dog Night',
  'The Village People',
  'Wings (fronted by former Beatle Paul McCartney)',
  'Yes'
</script><script type="text/javascript">
   window.onload = function() {
      new Autocompleter.Local(
        'bands_from_the_70s',
        'band_list',
        bandsList,
        {ignoreCase:false}
      );
   }
</script>
<body>
<p>
  <label for="bands_from">Your favorite rock  band from the 70's:</label>
  <br />
  <input id="bands_from_the_70s" autocomplete="off" size="40" type="text" value="" />
</p>
 
<div class="autocomplete" id="band_list" style="display:none"></div>

 

Y listo ya con eso debemos tener un textbox con sugerencias.

Enlaces

Autocompleter.Local para ver los parámetros aceptados.

Ajax search suggest with cakephp

Ejemplo simple autocomplete.local

]]> http://www.punksolid.com/autocompletar-con-scriptaculous/2011/feed/ 0 Como Actualizar un Div con Ajax y CakePHP 1.2 http://www.punksolid.com/como-actualizar-un-div-con-ajax-y-cakephp-1-2/2009/ http://www.punksolid.com/como-actualizar-un-div-con-ajax-y-cakephp-1-2/2009/#comments Wed, 16 Sep 2009 02:01:58 +0000 Punksolid http://www.punksolid.com/?p=439 Empezaré suponiendo que tienes nociones básicas sobre CakePHP1.2 y sabes hacer de perdida un CRUD.

Agregar las librerías javascript

Cakephp tiene una buena integración con las librerías javascript de prototype y scriptaculous, las cuales debemos descargarlas primero desde la pagina de descarga de scriptaculous y la de descargas de prototype, la de prototype es un archivo js. Renombrar a prototype.js y ponlo en "app/webroot/js".

La librería de scriptaculous es un archivo .zip que contiene una carpeta src que a su vez contiene muchos archivos js los cuales debemos copiar y ponerlos también en la app/webroot/js.

Añadir los helpers javascript y ajax al controlador

Ahora necesitamos agregar los helpers de javascript y de ajax. Una opcion es agregarlos a cada controlador a como la vayamos necesitando o agregarlos al app_controller para que estén disponibles en todos los controladores.

class AppController extends Controller {
var $helpers = array('Html','Form','Javascript','Ajax');
 
}
<h3>Vistas</h3>
Cada vista que sue javascript debemos añadirle las siguientes etiquetas
<?php
echo $javascript->link('prototype');
echo $javascript->link('scriptaculous');
?>
<h2>Ajax 3 - testing ajax link and button</h2>
<?php
        $link_array1 = array('controller'=>'tweets' ,'action'=>'simple_ajax1_fcn');
		//the function to execute: function ajaxfcn1 in controller tests
        $link_array2 = array( 'update' => 'divout');
 
       echo ($ajax->link('this an ajax link', $link_array1,$link_array2));
        echo "<br/><br/>";
?>
 
<br/>
<div id="divout">
the div to update
</div>

Controlador

<?php
class TweetsController extends AppController {
 
        var $name = 'Tweets';
        var $uses = array();            // prevent cake from looking for a database model
		var $helpers = array('Html','Ajax','Javascript');
        function index() {
 
        }
        function simple_ajax1_fcn() {
                $this->autoRender = false;
                echo "text from ajax call";
        }
}?>
]]> http://www.punksolid.com/como-actualizar-un-div-con-ajax-y-cakephp-1-2/2009/feed/ 3