Как загрузить контент в div с помощью ajax?
После проверки с помощью javascript, что я смогу использовать местоположение клиента:
if (navigator.geolocation) {
...
Мне нужно загрузить содержимое блока представления с аргументами (на основе координат позиции). Я знаю, как получить HTML-код, который я хочу поместить в div, так что, по крайней мере, у меня есть эта часть.
Я пытался следовать Простой загрузке AJAX на Drupal с помощью jQuery и обратного вызова доставки статьи (то есть писать для Drupal 7, очень отличающейся от Drupal 8), но я только что прибыл в загрузите страницу в div (с верхними и нижними колонтитулами, очень далекими от моего реального объекта).
jQuery('#my-div').load('/admin/help');
Есть идеи о том, как загружать контент в div с помощью ajax?
4 answers
Я придумал рабочее решение. Возможно, это не лучший подход, но он работает.
Вам необходимо создать файл маршрутизации:
My_module.маршрутизация.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>
Ссылки:
Это именно то, что вам нужно.
var endpoint = Drupal.url('modal/get-content');
Drupal.ajax({ url: endpoint }).execute();
Где конечная точка - это 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;
}
Добавьте то, что вам нужно, в свой массив сборки, и для визуализации без шаблона страницы вы можете перейти к новому объекту ответа:
$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;
Я искал такое же решение и был очень удивлен, что в drupal нам нужна только одна строка кода:
Drupal.ajax({ url: endpoint }).execute();