Abril 04, 2014
enzo
En la entrada de blog Como lanzar llamadas Drupal.ajax a discreción en Drupal 7 aprendimos como hacer un comando de Drupal.Ajax que se ejecute a discreción y que ejecute un llamado ajax a una dirección deseada cuando lo deseemos.
Ahora para hacerlo mas interesante, imaginemos que deseamos agregar una lógica especial que dependiente de la interacción del usuario se ejecute el llamado Ajax pero con diferentes parámetros.
- Extender función prototype triggerRequest.
Anteriormente creamos una función prototipo para manejar los llamados ajax a discreción, ahora la cambiaremos un poco para poder aceptar parámetros que cambiaran entre llamadas. Veamos el código.
(function ($, undefined) {
/**
* Extra function to the Drupal ajax object.
* Allows us to trigger an ajax response without
* an element.
*/
Drupal.ajax.prototype.triggerRequest = function (extra_options) {
var ajax = this;
var ajax_options;
if ($.isEmptyObject(extra_options)) {
ajax_options = ajax.options;
} else {
// Merging configuration and overwrite the data
$.extend(extra_options, ajax.options);
// Take submit settings and set as data
extra_options.data = extra_options.submit;
ajax_options = extra_options;
}
// Avoid concurrent ajax commands.
if (ajax.ajaxing) {
return false;
}
try {
$.ajax(ajax_options);
} catch (err) {
alert('An error occurred while attempting to process ' + ajax.options.url);
return false;
}
return false;
};
})(jQuery);Cuando se crear el comando Drupal.Ajax este se crea ciertas configuraciones y que son accesibles en el llamado Ajax en la variable ajax.options y estas no pueden ser sobreescritas, por eso lo que hago es aceptar un parámetro opcional extra_options el cual si esta presente se combinara con las opciones ya presentes en el comando.
- Ejecutar comando con diferentes parámetros.
Ahora lo que debemos implementar la lógica para hacer nuestros llamados ajax con o sin parámetros.
Imaginemos que tenemos un html que nos va a funcionar como navegación y filtrado de nuestro contenido como se muestra a continuación.
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
<body>
<div class="content-navigation">
<a href=# data="all">All</a>
<a href=# data="news">News</a>
<a href=# data="videos">Videos</a>
</div>
<div class="content">
<!-- SOME CONTENT HERE -->
</div>
<a class="custom_ajax" href="#">Load more</a>
</body>
</html>Ahora agregamos un poco de jQuery para poder agregar o quitar la clase selected a nuestros elementos de navegación con el siguiente script.
jQuery('.content-navigation a').click(function() {
$(this).siblings().removeClass('selected');
$(this).addClass('selected');
});Ahora debemos agregar nuestro behavior en donde se crear el comando Drupal.Ajax con ciertos parámetros de configuración.
(function ($, undefined) {
Drupal.behaviors.custom_ajax = {
attach: function (context, settings) {
var custom_ajax_settings = {};
custom_ajax_settings = 'content_ajax/notify';
custom_ajax_settings.keypress = false;
custom_ajax_settings.prevent = false;
Drupal.ajax.custom_ajax = new Drupal.ajax(false, $(document.body), custom_ajax_settings);
$('a.custom_ajax').click(function (e) {
e.preventDefault();
if ($('.content-navigation a.selected').length) {
if ($('.content-navigation a.selected').attr('data') !== 'all') {
var extra_settings = {};
extra_settings.submit = {};
// Filter content
var filter = $('.content-navigation a.selected').attr('data');
extra_settings.submit.filter = filter;
Drupal.ajax.load_more.triggerRequest(extra_settings);
}
else {
Drupal.ajax. custom_ajax.triggerRequest();
}
}
else {
Drupal.ajax. custom_ajax.triggerRequest();
}
return false;
});
}
};
})(jQuery);En el script anterior manejamos que si cuando se hace click en el link con clase custom_ajax se determine si existe algún filtrado que debamos enviar como parámetros adicional en este caso podría ser news o videos, los cuales gracias a la implementación del prototipo de enviaran en el elemento $_POST del llamado Ajax y podrá ser usado como insumo para la función que debe procesar el ajax para responder de la forma adecuada.
Espero que haya sido de su agrado.