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

Drupal.AjaxAuthor: 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

Backend Frontend

Ajax command

Drupal.ajax ObjectDrupal.ajax delivery callback

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'),

);

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,

);

Command using example

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 commandJS 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 tweaksDrupal.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 }); } };

Case #1: receipt nodes filter

Case #2: Load more

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.inc/group/ajax_commands/72. Main drupal.ajax framework documentation:https://api.drupal.org/api/drupal/includes!ajax.inc/group/ajax/73. https://www.drupal.org/project/example

Interesting?

Email: [email protected]: AnPoliakovFB: anatoliy.polyakovhttp://techdirector.me