web-dev-qa-db-ja.com

ajaxを使用してdivにコンテンツを読み込む方法は？

クライアントの場所を使用できることをJavaScriptで検証した後：

if (navigator.geolocation) {
...

引数付きのビューブロックのコンテンツをロードする必要があります（位置座標に基づく）。 div内に配置するHTMLを取得する方法を知っているので、少なくともこの部分は持っています。

私は Simple Drupal AJAX load with jQuery and delivery callback の記事（Drupal 7 Drupal 8）とは非常に異なりますが、私はdivにページをロードするために到着しました（実際のオブジェクティブから非常に離れたヘッダーとフッターがあります）。

jQuery('#my-div').load('/admin/help');

Ajaxを使用してdivにコンテンツをロードする方法に関するアイデアはありますか？

8javascriptajax
5
Adrian Cid Almaguer

私は実用的な解決策を思いついた。それは最善の方法ではないかもしれませんが、うまくいきます。

ルーティングファイルを作成する必要があります。

my_module.routing.yml

diocese_core.path_with_data:
  path: 'path-with-data'
  defaults:
    _controller: '\Drupal\my_module\Controller\MyController::Render'
  requirements:
    _access: 'TRUE'

ページのコントローラーを作成する

src/Controller/MyController.php

<?php

namespace Drupal\my_module\Controller;

use Drupal\Core\Controller\ControllerBase;
use \Symfony\Component\HttpFoundation\Response;

/**
 * An example controller.
 */
class MyController extends ControllerBase {

  /**
   * {@inheritdoc}
   */
  public function Render() {
    $build = array(
      '#type' => 'markup',
      '#markup' => t('Hello World!'),
    );
    // This is the important part, because will render only the TWIG template.
    return new Response(render($build));
  }

}

javascriptを呼び出すだけです

jQuery('#my-div').load('path-with-data');

コードが実行されると、これが出力になります。

<div id="my-div">Hello World!</div>

参考文献：

13
Adrian Cid Almaguer

これはまさにあなたが必要とするものです。

var endpoint = Drupal.url('modal/get-content');
Drupal.ajax({ url: endpoint }).execute();

ここでendpointはルートのURLです。ルートのコントローラーがあり、このコントローラーにはAjaxResponseがあります

public function getContent($modal_id) {
  $response = new AjaxResponse();

  $selector = '.modal.in .modal-body';

  // You can use markup, rendreable array, getForm via form_builder service.
  $content = [
    '#markup' => '....',
  ];

  $response->addCommand(new InvokeCommand($selector, 'removeClass', ['spinner-loading']));
  $response->addCommand(new HtmlCommand($selector, $content));

  return $response;
}
8
Alex Kuzava

必要なものをビルド配列に追加し、ページテンプレートなしでレンダリングするには、新しいResponseオブジェクトに渡すことができます。

$build['view'] = [
  '#type' => 'view',
  '#name' => 'my_view',
  '#display_id' => 'block_1',
  '#arguments' => $view_arguments,
];

$rendered = \Drupal::service('renderer')->renderRoot($build);

$response = new Response();
$response->setContent($rendered);
return $response;
4
oknate

私は同じ解決策を検索しましたが、drupalの方法では1行のコードしか必要としないことに非常に驚いていました。

Drupal.ajax({ url: endpoint }).execute();
1
Lauris Kuznecovs