You are here

public function AjaxExampleController::renderLinkRenderableArray in Examples for Developers 3.x

Same name and namespace in other branches
  1. 8 ajax_example/src/Controller/AjaxExampleController.php \Drupal\ajax_example\Controller\AjaxExampleController::renderLinkRenderableArray()

Demonstrates a clickable AJAX-enabled link using the 'use-ajax' class.

Because of the 'use-ajax' class applied here, the link submission is done without a page refresh.

When using the AJAX framework outside the context of a form or a renderable array of type 'link', you have to include ajax.js explicitly.

Return value

array Form API array.

Related topics

1 string reference to 'AjaxExampleController::renderLinkRenderableArray'
ajax_example.routing.yml in modules/ajax_example/ajax_example.routing.yml
modules/ajax_example/ajax_example.routing.yml

File

modules/ajax_example/src/Controller/AjaxExampleController.php, line 40

Class

AjaxExampleController
Controller routines for AJAX example routes.

Namespace

Drupal\ajax_example\Controller

Code

public function renderLinkRenderableArray() {
  $build['my_div'] = [
    '#markup' => $this
      ->t('
The link below has been rendered as an element with the #ajax property, so if
javascript is enabled, ajax.js will try to submit it via an AJAX call instead
of a normal page load. The URL also contains the "/nojs/" magic string, which
is stripped if javascript is enabled, allowing the server code to tell by the
URL whether JS was enabled or not, letting it do different things based on that.'),
  ];

  // We'll add a nice border element for our demo.
  $build['ajax_link'] = [
    '#type' => 'details',
    '#title' => $this
      ->t('This is the AJAX link'),
    '#open' => TRUE,
  ];

  // We build the AJAX link.
  $build['ajax_link']['link'] = [
    '#type' => 'link',
    '#title' => $this
      ->t('Click me'),
    // We have to ensure that Drupal's Ajax system is loaded.
    '#attached' => [
      'library' => [
        'core/drupal.ajax',
      ],
    ],
    // We add the 'use-ajax' class so that Drupal's AJAX system can spring
    // into action.
    '#attributes' => [
      'class' => [
        'use-ajax',
      ],
    ],
    // The URL for this link element is the callback. In our case, it's route
    // ajax_example.ajax_link_callback, which maps to ajaxLinkCallback()
    // below. The route has a /{nojs} section, which is how the callback can
    // know whether the request was made by AJAX or some other means where
    // JavaScript won't be able to handle the result. If the {nojs} part of
    // the path is replaced with 'ajax', then the request was made by AJAX.
    '#url' => Url::fromRoute('ajax_example.ajax_link_callback', [
      'nojs' => 'nojs',
    ]),
  ];

  // We provide a DIV that AJAX can append some text into.
  $build['ajax_link']['destination'] = [
    '#type' => 'container',
    '#attributes' => [
      'id' => [
        'ajax-example-destination-div',
      ],
    ],
  ];
  return $build;
}