Diferencia entre revisiones de «AJAX»

De KumbiaPHP Framework Wiki
 
(No se muestran 11 ediciones intermedias de 4 usuarios)
Línea 1: Línea 1:
 +
(Esta información ya no aplica en la versión beta2)
 
Kumbia posee soporte para funciones AJAX con el framework Prototype y también sin él.
 
Kumbia posee soporte para funciones AJAX con el framework Prototype y también sin él.
 
Recordemos que prototype (http://prototype.conio.net) está incluida por defecto al igual
 
Recordemos que prototype (http://prototype.conio.net) está incluida por defecto al igual
 
que las funciones drag-and-drop (arrastrar y soltar), effects (efectos) y controls
 
que las funciones drag-and-drop (arrastrar y soltar), effects (efectos) y controls
 
(controles) de Script.aculo.us.
 
(controles) de Script.aculo.us.
 +
 
El soporte para estas librerías, está por defecto en la línea que dice:
 
El soporte para estas librerías, está por defecto en la línea que dice:
 
<source lang=php>
 
<source lang=php>
 
  <?kumbia_use_effects() ?>
 
  <?kumbia_use_effects() ?>
 
</source> en views/index.phtml esta función incluye los documentos javascripts necesarios para usarlas.
 
</source> en views/index.phtml esta función incluye los documentos javascripts necesarios para usarlas.
 +
 +
 +
En la version 1.0 Spirit hay que agregar el siguiente partial:
 +
<source lang=php>
 +
<?php View::partial('kumbia/prototype'); ?>
 +
</source> en views/index.phtml o entre las viñetas del head esta función incluye los documentos javascripts necesarios para usarlas.
 +
  
 
==link_to_remote==
 
==link_to_remote==
Línea 12: Línea 21:
 
actualiza en un contenedor (div, span, td, etc) del documento actual.
 
actualiza en un contenedor (div, span, td, etc) del documento actual.
 
<source lang=php>  
 
<source lang=php>  
<?php echo link_to_remote("Cargar algo con AJAX", "update: midiv", "action:  
+
<?php
        saludo/hola") ?>
+
echo link_to_remote("Cargar algo con AJAX", "update: midiv", "action:saludo/hola") ?>
 
<div id="midiv">Este texto será actualizado</div>
 
<div id="midiv">Este texto será actualizado</div>
 
</source>
 
</source>
Línea 28: Línea 37:
 
   function hola(){
 
   function hola(){
 
     #Indica que el resultado sera solo una parte de la vista actual
 
     #Indica que el resultado sera solo una parte de la vista actual
     $this­>set_response('view');
+
     $this-­>set_response('view');
 
   }//fin del metodo
 
   }//fin del metodo
 
}//fin de la clase
 
}//fin de la clase
Línea 36: Línea 45:
 
views/saludo/ que contiene lo siguiente:
 
views/saludo/ que contiene lo siguiente:
 
<source lang=php>
 
<source lang=php>
<h2>Esto es Kumbia con AJAX</h2><?php echo time() ?>
+
<h2>Esto es Kumbia con AJAX</h2>
 +
<?php echo time() ?>
 
</source>
 
</source>
Al probarlo el texto ‘Esto es Kumbia con AJAX’ y el timestamp actual aparecerán
+
Al probarlo el texto '''Esto es Kumbia con AJAX''' y el timestamp actual aparecerán
 
como por arte de magia en el div indicado.
 
como por arte de magia en el div indicado.
 +
 +
Antes de la petición:
 +
 +
[[Archivo:Img_ajax1.jpeg]]
 +
 +
Luego de la petición:
 +
 +
[[Archivo:Ajax2.jpg]]
 +
 +
==form_remote_tag==
 +
 +
<source lang="php" line>
 +
form_remote_tag($action, $objeto_que_actualiza)
 +
</source>
 +
 +
Permite crear un formulario que al ser enviado, genera una petición AJAX y no una
 +
petición normal. El parámetro $action indica que acción se está solicitando y el segundo
 +
parámetro el contenedor html donde se va a colocar el resultado de la petición.
 +
Todos los elementos del formularios son serializados y enviados remotamente por
 +
método GET por defecto al oprimirse cualquier botón de submit o de image dentro del
 +
formulario.
 +
 +
También puede recibir los parámetros before, success y oncomplete que tienen código
 +
javascript que sera ejecutado antes, después y al completar la transacción AJAX
 +
respectivamente.
 +
 +
Adicionalmente se puede usar el parámetro confirm para indicar que se debe realizar una
 +
confirmación antes de hacer la petición AJAX.
 +
 +
<source lang="php" line>
 +
<?php echo form_remote_tag("saludo/hola", "update: midiv") ?>
 +
Tu Nombre?: <?php echo text_field_tag("nombre") ?>
 +
<?php echo submit_tag("Envio") ?>
 +
<?php echo end_form_tag() ?>
 +
<div id="midiv">Este texto será actualizado</div>
 +
</source>
 +
 +
Puede recibir 'n' parámetros adicionales de la etiqueta html 'form' para cambiar los
 +
atributos de esta. Se debe cerrar el formulario usando la funcion end_form_tag.
 +
 +
También se pueden agregar eventos javascript tales como success, before y oncomplete:
 +
 +
<source lang="php" line>
 +
<?php echo form_remote_tag("saludo/hola", "update: midiv", "before:alert('Se ha enviado
 +
el Formulario')") ?>
 +
Tu Nombre?: <?php echo text_field_tag("nombre") ?>
 +
<?php echo submit_tag("Envio") ?>
 +
<?php echo end_form_tag() ?>
 +
<div id="midiv">Este texto será actualizado</div>
 +
</source>

Revisión actual del 10:06 5 ago 2012

(Esta información ya no aplica en la versión beta2) Kumbia posee soporte para funciones AJAX con el framework Prototype y también sin él. Recordemos que prototype (http://prototype.conio.net) está incluida por defecto al igual que las funciones drag-and-drop (arrastrar y soltar), effects (efectos) y controls (controles) de Script.aculo.us.

El soporte para estas librerías, está por defecto en la línea que dice:

 <?kumbia_use_effects() ?>

en views/index.phtml esta función incluye los documentos javascripts necesarios para usarlas.


En la version 1.0 Spirit hay que agregar el siguiente partial:

 <?php View::partial('kumbia/prototype'); ?>

en views/index.phtml o entre las viñetas del head esta función incluye los documentos javascripts necesarios para usarlas.


link_to_remote[editar]

Permite hacer un llamado sencillo mediante AJAX que solicita un fragmento HTML y lo actualiza en un contenedor (div, span, td, etc) del documento actual.

 
<?php
echo link_to_remote("Cargar algo con AJAX", "update: midiv", "action:saludo/hola") ?>
<div id="midiv">Este texto será actualizado</div>

La función link_to_remote generalmente toma 3 parámetros:

  1. El Texto del enlace
  2. El id del objeto HTML que se va a actualizar en este caso midiv.
  3. La acción de la cual se obtendrán la información para actualizar.

Cuando el usuario hace clic sobre el vinculo la acción hola en el controlador saludo será invocada en segundo plano y cualquier información obtenida será reemplazada en el div. El controlador ‘controllers/saludo’ tiene una acción llamada hola:

 
<?php
class SaludoController extends ApplicationController {
   function hola(){
     #Indica que el resultado sera solo una parte de la vista actual
     $this-­>set_response('view');
   }//fin del metodo
}//fin de la clase

La implementación vacía del método indica que no hay lógica para esta acción sin embargo Kumbia carga automáticamente la vista con el nombre hola.phtml en views/saludo/ que contiene lo siguiente:

<h2>Esto es Kumbia con AJAX</h2>
<?php echo time() ?>

Al probarlo el texto Esto es Kumbia con AJAX y el timestamp actual aparecerán como por arte de magia en el div indicado.

Antes de la petición:

Img ajax1.jpeg

Luego de la petición:

Ajax2.jpg

form_remote_tag[editar]

form_remote_tag($action, $objeto_que_actualiza)

Permite crear un formulario que al ser enviado, genera una petición AJAX y no una petición normal. El parámetro $action indica que acción se está solicitando y el segundo parámetro el contenedor html donde se va a colocar el resultado de la petición. Todos los elementos del formularios son serializados y enviados remotamente por método GET por defecto al oprimirse cualquier botón de submit o de image dentro del formulario.

También puede recibir los parámetros before, success y oncomplete que tienen código javascript que sera ejecutado antes, después y al completar la transacción AJAX respectivamente.

Adicionalmente se puede usar el parámetro confirm para indicar que se debe realizar una confirmación antes de hacer la petición AJAX.

 <?php echo form_remote_tag("saludo/hola", "update: midiv") ?>
 Tu Nombre?: <?php echo text_field_tag("nombre") ?>
 <?php echo submit_tag("Envio") ?>
 <?php echo end_form_tag() ?>
 <div id="midiv">Este texto será actualizado</div>

Puede recibir 'n' parámetros adicionales de la etiqueta html 'form' para cambiar los atributos de esta. Se debe cerrar el formulario usando la funcion end_form_tag.

También se pueden agregar eventos javascript tales como success, before y oncomplete:

<?php echo form_remote_tag("saludo/hola", "update: midiv", "before:alert('Se ha enviado
 el Formulario')") ?>
 Tu Nombre?: <?php echo text_field_tag("nombre") ?>
 <?php echo submit_tag("Envio") ?>
 <?php echo end_form_tag() ?>
 <div id="midiv">Este texto será actualizado</div>