Ajax calls in drupal 8: ontdek hoe

Drupal tip
Drupal tip

Ajax calls in drupal 8: ontdek hoe

Drupal 8 heeft een volledig herschreven routing systeem. Er zijn heel wat zaken gewijzigd bij het uitvoeren van custom ajax calls ten opzichte van drupal 7. We zetten de belangrijkste wijzigingen voor je op een rijtje:

Drupal 7

Om een custom ajax call uit te voeren, moet er een callback beschikbaar zijn. In drupal 7 wordt dit gedaan in hook_menu:


function hook_menu(){
  $items['my/callback'] = array(
    'title'=> t('Callback'),
    'page callback' => 'my_callback',
    //...
  );
}

Vervolgens wordt in de callback functie de nodige functionaliteit geschreven en voorziet men hier een return value in JSON formaat:


function my_callback(){
  //...
  $my_array = array(
    'data'=> 'my_data',
  );
  drupal_json_output($my_array);
}

Ten slotte moet de moet de functie aangesproken worden via een ajax call:


//...
$.ajax({
  type: 'POST',
  url: '/my/callback',
  dataType: 'json',
  success: function (data) {
    // Do something.
  },
  data: 'my_key=value'
});
//...

Bovenstaande code is voldoende om in drupal 7 een custom ajax call uit te voeren.

Drupal 8

Drupal 8 verwacht dezelfde 3 stappen (menu item registreren, callback functie implementeren en ajax call uivoeren), maar de structuur en syntax van de code zit volledig anders in elkaar:


mymodule.ajax_callback: 
  path: 'my/callback'
  defaults:
    _controller: '\Drupal\my_module\Controller\MyModuleController::my_callback'
    _title: 'Callback'
  requirements:
    _permission: 'access content'
    _format: json

Bovenstaande code registreert het menu item en laat drupal weten dat de callback functie een JSON object zal genereren. Let op dat je bij de defaults gebruik maakt van _controller en niet _content.

Vervolgens moet de controller de functie my_callback implementeren:


public function my_callback() {
  //...
  $my_array = array(
    'data'=> 'my_data',
  );
  return new JsonResponse($my_array);
}

De laatste stap is de javascript code implementeren die de ajax call uitvoert:


$.ajax({
  url: '/my/callback',
  dataType: 'json',
  success: function (data) {
    // Do something.
  },
  data: '_format=json'
});

Basis ajax calls kunnen makkelijk geïmplementeerd worden met de ajax api. Op deze pagina kan je meer info vinden.

Blijf op de hoogte via onze nieuwsbrief