Como utilizar Ajax en formularios de drupal

Este pequeño tutorial es para documentar como se puede implementar ajax en algunos campos de formularios de Drupal. Lo primero que haremos será crear un módulo, en este caso el nuestro se llama gestión.
Ojo, para entender este tutorial hay que tener conocimientos de php, jquery, json.

El primer paso de todos es crear el hook_menu y el hook_perm, para definir los permisos de acceso al formulario.


<?php
/**
* Implementation of hook_perm().
*/

function gestion_perm() {
  return array(
'alta de partida','acceso resultados', 'sacar_usuarios', 'alta_formulario');
}


/**
* Implementation of hook_menu().
*/
function gestion_menu() {

//este elemento monta la ruta de acceso a la función que nos permite consultar los nuevos datos en el segundo select.

$items['gamess/get'] = array(
   
'title' => 'carga de datos',
   
'page callback' => 'sacar_usuarios',
   
'access arguments' => array('access sacar_usuarios'),
   
'type' => MENU_CALLBACK
 
);


// Este elemento define la ruta del formulario donde tendremos ambos selects.
 
$items['games'] = array(
   
'title' => 'comprobar ajax',
   
'description' => 'comprobar ajax.',
   
'page callback' => 'drupal_get_form',
   
'page arguments' => array('alta_formulario'),
   
'access arguments' => array('alta de formulario'),
   
'type' => MENU_NORMAL_ITEM,
    );

return
$items;

}
?>

El segundo paso es crear el formulario con los elementos, y la función que utilizaremos para recargar los datos.


<?php

// función para generar el formulario que queremos modificar con ajax.
function alta_formulario() {
 
$form['jugadores'] = array(
   
'#type' => 'fieldset',
   
'#title' => t('Datos jugadores'),
   
'#collapsible' => TRUE,
   
'#collapsed' => FALSE,
  );

$form['jugadores']['ejercito_jugador1'] = array(
   
'#type' =>  'select',
   
'#title' => t('taxonomías'),
   
'#options' => sacar_taxonomia(),
   
'#required' => TRUE,
  );

$form['jugadores']['ejercito_jugador2'] = array(
   
'#type' =>  'select',
   
'#title' => t('usuarios'),
   
'#attributes' => array('class' => 'search-form'),
   
'#options' => array('seleccione' => t('seleccione una taxonomía'), ),
   
'#required' => TRUE,
  );
 

$form['hidden'] = array(
   
'#type' => 'value',
   
'#value' => 'alta'
);
$form['submit'] = array(
   
'#type' => 'submit',
   
'#ajax' => array(
   
'submitter' => TRUE
 
),
   
'#value' => t('Guardar')
);
  return
$form;
}

function
test_page() {
  return
drupal_get_form('alta_form');
  return
drupal_get_form('alta_formulario');
}
// esta es la función que nos recupera los usuarios que han usado la taxonomía seleccionada en el primer select.
function sacar_usuarios($usuario){
 
 
$resultado = db_query ("select u.uid as uid, u.name as name
                from users u inner join node n on (u.uid=n.uid) left join term_node tn on (tn.nid = n.nid) where
                tn.tid=%s and u.uid > 0"
, $usuario);
  while(
$obj = db_fetch_object($resultado)) {
   
$usuarios .= '<option value="'.$usuarios[$obj->uid].'">'.$obj->name.'</>';
  }
 
// create a JSON object. The object will contain a property named “products” that will be set with the $items variable.
 
return drupal_json(array('users'=>$usuarios));
  exit;
}
?>

3º Ahora tenemos que crear el código de jquery que nos permitirá por un lado recoger el elemento seleccionado en el primer select, pasarlo a la función sacar_usuarios y recuperar los datos mediante json para devolverlos al formulario.

/*
*
*Jquery para el modulo gestión
*
*/

// $Id$
// Global killswitch: only run if we are in a supported browser.
//comprobamos que este activado javascript
if (Drupal.jsEnabled) {
//si esta funcionando definimos la función
    $(function(){
//Este código nos permite comprobar cada vez que seleccionamos un elemento del select.
        $('#edit-ejercito-jugador1').change(function(){
//Cada vez que seleccionamos un elemento del select recuperamos el valor del atributo value.
            $(this).each(function () {
                var valor = $(this).val();
                    //alert (valor);

//Montamos una función para crear la url mediante la cual pasaremos los datos.
                var ruta = 'gamess/get/';
                var url2 = Drupal.settings.basePath + ruta + valor;
                alert (url2);
//La función que ejecutará el cambio de html con la información recuperada.
                var updateUsers = function(data) {
                    $('#edit-ejercito-jugador2').html(data.products);
                    }
//La magia de jquery con ajax, las explicaciones son de mucha ayuda
                $.ajax({
                    type: 'POST',
                    url: url2, // Which url should be handle the ajax request. This is the url defined in the <a> html tag
                    success: updateUsers, // The js function that will be called upon success request
                    dataType: 'json', //define the type of data that is going to get back from the server
                    data: 'js=1' //Pass a key/value pair
                    });
                    return false;  // return false so the navigation stops here and not continue to the page in the link
            });
        });
       
    });     
}

4º El último elemento a llevar a cabo, es incluir el archivo de *.js que hemos creado en el módulo que hemos desarrollado.

<?php
drupal_add_js
(drupal_get_path('module', 'gestion') .'/js/gestion.js', 'module');
?>

Espero que sea útil, parece complicado al principio, pero la verdad es que una vez creado el primero el resto van todos iguales y se abre todo un mundo de posibilidades con ajax.

Un saludo

Oskar

Trackback URL for this post:

http://www.documentados.com/trackback/277

Comentarios

Creación del módulo

Buenas oskar,

gracias por este tutorial, ahora me entero un poco más de como funciona Ajax en Drupal.

He creado los archivos .module y .info, así como la carpeta js y el fichero prueba.js.
El caso es que al activar el módulo la pantalla se me queda en blanco y en el log de errores no aparece nada.
Estoy usando Drupal 6.

Muchas gracias.

Saludos

_snake_ cuando hago un módulo

_snake_ cuando hago un módulo voy poco a poco, en vez de montarlo todo a la vez.

Comprueba que funciona correctamente el hook menu, y luego comprueba que el hook theme este bien implementados.

Un saludo

Oskar

Bueno, estoy empezando a

Bueno,

estoy empezando a meterme en esto de Drupal y me gustaría saber cómo comprobar poco a poco que todo está correcto. ¿Empleando el módulo Devel?

Muchas gracias

P.D.: el captcha a veces es ilegible...

Enviar un comentario nuevo

El contenido de este campo se mantiene como privado y no se muestra públicamente.
To prevent automated spam submissions leave this field empty.
By submitting this form, you accept the Mollom privacy policy.