Анатолий Поляков - Drupal.ajax framework from a to z

Drupal.Ajax
Author: Anatoliy Poliakov (Door3)

What is Drupal.ajax framework?
1. Flexible framework for managing front-end
objects using backend.
2. Framework that provide easy way to develop
strong and stable projects with complex ajax
part.
3. Framework that help us save MVC pattern
more clear (more business logic in back-end).

Quick intro examples
1. Form ajax features (start point of the
framework).
2. AJAX updates for blocks on page.
3. Ajaxable links.

Drupal.ajax framework Model
Drupal.ajax delivery callback Drupal.ajax Object
Ajax command
Backend Frontend

What we had in forms
$form['product_category_' . $basic_term->tid]['childrens'] = array(
'#type' => 'checkboxes',
'#options' => $product_titles,
'#ajax' => array(
'callback' => '_vkusno_main_search_receipt_product_ajax',
),
);

Drupal.ajax could be attached to links on page.
drupal_add_library('system', 'drupal.ajax');
$output[] = l(t('Ajax example'), 'our_callback',
array(
'attributes' => array(
'class' => 'use-ajax'
),
));

What we have in the box?
● Deliver ajax commands that can
add/change/remove DOM model.
● Works automatically with forms.
● Could be quickly added to links or DOM
elements.
● Most of business logic is stored at back-end.
● 90% tasks doesnt require any line of JS
code.

Command using example
1. Flag in hook menu:
$items['receipts/truncate-filters/ajax'] = array(
'page callback' => ‘receipts_flush_filters_backend',
'type' => MENU_NORMAL_ITEM,
'delivery callback' => 'ajax_deliver',
'access arguments' => array('access content'),
);

Command using example
1. Simple callback example.
$commands[] = ajax_command_remove('#search_results_modal');
$commands[] = ajax_command_remove('#receipts_search_modal_bg');
$commands[] = ajax_command_invoke('#' . str_replace('_', '-', $form_id) . '
.form-checkbox', 'removeAttr', array('checked'));
return array(
'#type' => 'ajax',
'#commands' => $commands,
);

Some notes about ajax_command_*
ajax_command_append('#content .section',
theme(
'vkusno_receipts_search_result',
array(
'link' => $link,
'total' => $count,
'link_flush' => _vkusno_receipts_flush_filters($form['#form_id']),
)
)
);
jQuery selector
Variable for rendering

Default ajax commands
1. ajax_command_alert($text)
2. ajax_command_append($selector, $html, $settings = NULL)
3. ajax_command_settings($argument, $merge = FALSE)
4. ajax_command_remove($selector)
5. ajax_command_invoke($selector, $method, array $arguments = array())
*ajax_command_invoke give us ability to add commands that are not
implemented in Core.

Adding drupal.ajax to DOM element
(function ($) {
Drupal.behaviors.my_module_load_remote_content = {
attach: function(context, settings) {
$('#remote-content-wrapper').once('remote-content-wrapper', function() {
var base = $(this).attr('id');
var argument = $(this).attr('argument');
var element_settings = {
url: 'http://' + window.location.hostname + settings.basePath + settings.pathPrefix + 'ajax/remote',
event: 'click', progress: { type: 'throbber' }
};
Drupal.ajax[base] = new Drupal.ajax(base, this, element_settings);
$(this).click();
});
}};
})(jQuery);

Adding custom drupal.ajax command
JS part:
Drupal.bt_form.bt_dismiss = function(ajax, response, status) {
$('.bt-form-active').removeClass('bt-form-active').btOff();
};
Drupal.ajax.prototype.commands.bt_dismiss = Drupal.bt_form.bt_dismiss;
PHP part:
function bt_form_command_dismiss() {
return array(
'command' => 'bt_dismiss',
);
}

Front-end tweaks
Drupal.mikiforex_promo.beforeSend = function (ajax, settings) {
$(ajax.element).addClass('progress-disabled').attr('disabled', true);
if (ajax.progress.type == 'dialog') {
var progressElement = $('<div style="text-align: center; width: 100%;" class="_ajax-progress ajax-progress-
dialog"><span class="ajax_loader">' + settings.mikiforex.ajax_loader + '</span></div>');
ajax.progress.element = progressElement;
$('body').prepend(ajax.progress.element);
progressElement.dialog({
modal: true ,
dialogClass: "no-titlebar",
resizable: false,
width: 280,
height: 85
});
}
};

Drawbacks
1. Slow response on big projects.
2. Not easy to implement for div’s, p’s, span’s.
3. Non-form implementation needs hook_menu
implementation.

Links
1. Commands documentation:
https://api.drupal.org/api/drupal/includes!ajax.in
c/group/ajax_commands/7
2. Main drupal.ajax framework documentation:
https://api.drupal.org/api/drupal/includes!ajax.in
c/group/ajax/7
3. https://www.drupal.org/project/example

Interesting?
Email: anatoliy.polyakov@door3.com
Twitter: AnPoliakov
FB: anatoliy.polyakov
http://techdirector.me

Анатолий Поляков - Drupal.ajax framework from a to z

More Related Content

What's hot

Viewers also liked

Similar to Анатолий Поляков - Drupal.ajax framework from a to z

More from LEDC 2016

Recently uploaded

Анатолий Поляков - Drupal.ajax framework from a to z